Obtener los datos de api con axios por medio del ID

tengo un problema para poder mostrar y a su vez cargar datos desde mi API Laravel a mi vista mostrar de vue, la url de mi API esta funcionando bien, pero al intentar traer los datos a mi vista por algun problema no me resulta, tengo en este proceso una vista render entre medio, al momento de dar click a un registro de mi tabla debe tomar ese id y consultar por ese para traer los datos.

introducir la descripción de la imagen aquí

el proceso es así:

1.- click al registro de la tabla, luego renderiza a vue template, llamando CellRendererLink.Vue

el cual tiene este código:

<template>
  <div class="flex items-center">
    <vs-avatar :src="params.data.avatar" class="flex-shrink-0 mr-2" size="30px" @click="$router.push(url)" />
    <router-link :to="url" @click.stop.prevent class="text-inherit hover:text-primary">{{ params.id }}</router-link>
  </div>
</template>

<script>
    export default {
        name: 'CellRendererLink',
        computed: {
          url() {
            return "/apps/user/user-view/1"
            // Below line will be for actual product
            // Currently it's commented due to demo purpose - Above url is for demo purpose
            // return "/apps/user/user-view/" + this.params.data.id
          }
        }
    }
</script>

2.- luego debe de traer los datos que me arroja el API de Laravel.

{
    "users": [
        {
            "id": 2,
            "cliente_id": 5,
            "copropietario_id": null,
            "role_id": 3,
            "name": "Bertha Schmitt",
            "email": "jany11@example.net",
            "created_at": "2020-04-15 04:36:38",
            "updated_at": "2020-04-15 04:36:38"
        }
    ]
}

and

y

3.-Debe finalmente cargar todos los datos en la vista mostrar, pero no me funciona, revise en consola del navegador y no recibo la data del api, practicamente como si no leyera la ruta de axios.

<template>
  <div id="page-user-view">

    <vs-alert color="danger" title="Usuario no encontrado" :active.sync="user_not_found">
      <span>Registro del usuario con el id: {{ $route.params.id }} no encontrado. </span>
      <span>
        <span>Revisar </span><router-link :to="{name:'page-user-list'}" class="text-inherit underline">Todos los usuarios</router-link>
      </span>
    </vs-alert>

    <div id="user-data" v-if="users">

      <vx-card title="Cuenta" class="mb-base">

        <!-- Avatar -->
        <div class="vx-row">

          <!-- Avatar Col -->
          <div class="vx-col" id="avatar-col">
            <div class="img-container mb-4">
              <img :src="users.avatar" class="rounded w-full" />
            </div>
          </div>

          <!-- Information - Col 1 -->
          <div class="vx-col flex-1" id="account-info-col-1">
            <table>
              <tr>
                <td class="font-semibold">Username</td>
                <td>{{ users.username }}</td>
              </tr>
              <tr>
                <td class="font-semibold">Nombre</td>
                <td>{{ users.name }}</td>
              </tr>
              <tr>
                <td class="font-semibold">Email</td>
                <td>{{ users.email }}</td>
              </tr>
            </table>
          </div>
          <!-- /Information - Col 1 -->

          <!-- Information - Col 2 -->
          <div class="vx-col flex-1" id="account-info-col-2">
            <table>
              <tr>
                <td class="font-semibold">Estado</td>
                <td>{{ users.email }}</td>
              </tr>
              <tr>
                <td class="font-semibold">Role</td>
                <td>{{ users.role_id }}</td>
              </tr>
              <tr>
                <td class="font-semibold">Condominio</td>
                <td>{{ users.cliente_id }}</td>
              </tr>
            </table>
          </div>
          <!-- /Information - Col 2 -->
          <div class="vx-col w-full flex" id="account-manage-buttons">
            <vs-button icon-pack="feather" icon="icon-edit" class="mr-4" :to="{name: 'app-user-edit', params: { id: $route.params.id }}">Edit</vs-button>
            <vs-button type="border" color="danger" icon-pack="feather" icon="icon-trash" @click="confirmDeleteRecord">Delete</vs-button>
          </div>

        </div>

      </vx-card>

      <!-- Permissions -->
      <vx-card>

        <div class="vx-row">
          <div class="vx-col w-full">
            <div class="flex items-end px-3">
              <feather-icon svgClasses="w-6 h-6" icon="LockIcon" class="mr-2" />
              <span class="font-medium text-lg leading-none">Permisos</span>
            </div>
            <vs-divider />
          </div>
        </div>

        <div class="block overflow-x-auto">
          <table class="w-full permissions-table">
            <tr>
              <!--
                You can also use `Object.keys(Object.values(data_local.permissions)[0])` this logic if you consider,
                our data structure. You just have to loop over above variable to get table headers.
                Below we made it simple. So, everyone can understand.
               -->
              <th class="font-semibold text-base text-left px-3 py-2" v-for="heading in ['Module', 'Read', 'Write', 'Create', 'Delete']" :key="heading">{{ heading }}</th>
            </tr>

            <tr v-for="(val, name) in users.permissions" :key="name">
              <td class="px-3 py-2">{{ name }}</td>
              <td v-for="(permission, name) in val" class="px-3 py-2" :key="name+permission">
                <vs-checkbox v-model="val[name]" class="pointer-events-none" />
              </td>
            </tr>
          </table>
        </div>

      </vx-card>
    </div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
    data ()
    {
        return {
        users: [],
        name: '',
        }
    },

    computed:
    {
    users() {
      return this.users
    }
    },

    methods:
    {
    mounted () {
        this.created()
    },
    created () {
        axios.get('http://localhost:8000/api/users/' + this.router.params.id)
            .then(res => {this.users = res.data.users;
            })
            }
    }
}

</script>

<style lang="scss">
#avatar-col {
  width: 10rem;
}

#page-user-view {
  table {
    td {
      vertical-align: top;
      min-width: 140px;
      padding-bottom: .8rem;
      word-break: break-all;
    }

    &:not(.permissions-table) {
      td {
        @media screen and (max-width:370px) {
          display: block;
        }
      }
    }
  }
}

// #account-info-col-1 {
//   // flex-grow: 1;
//   width: 30rem !important;
//   @media screen and (min-width:1200px) {
//     & {
//       flex-grow: unset !important;
//     }
//   }
// }


@media screen and (min-width:1201px) and (max-width:1211px),
only screen and (min-width:636px) and (max-width:991px) {
  #account-info-col-1 {
    width: calc(100% - 12rem) !important;
  }

  // #account-manage-buttons {
  //   width: 12rem !important;
  //   flex-direction: column;

  //   > button {
  //     margin-right: 0 !important;
  //     margin-bottom: 1rem;
  //   }
  // }

}

</style>

No entiendo mucho tu pregunta, pero veamos si desde lo que entiendo te puedo ayudar.
Hay un par de errores que te sugiero corregir, para llamar al parámetro ID del usuario desde tu componente deberías usar this.$route.params.id (estás usando this.router.params.id).
Llamar a mounted() y desde ahí a created() dentro de methods es un poco extraño, haz la llamada a tu api desde los ciclos de vida o lifecycles hooks (created, mounted, etc) o bien crea un método para ello, como getUsers() o algo similar, evita ocupar nombres de funciones que ya existen en Vue.

el resto te lo dejo en un gist: https://gist.github.com/ePardo/edb2c154f85d466b59748353edcddb3d

PD: si no te gusta el enfoque de router-link, puedes llamar a un método que haga this.$router.push(’/users/’+ user.id)

Saludos!

2 Likes

Gracias amigo, ya lo solucione al día siguiente de realizar el post. muchas gracias colega, saludos desde Chile

esta termino por ser mi solución para realizar la carga en la vista show, es decir para crear la vista de solo visualizar la data en mi sistema.

return "/apps/morosos/morosos-view/" + this.params.data.id

Muchas gracias, se parece un poco a lo que tu mencionaste como respuesta @ePardo

1 Like