0
272
Views¿Hay alguna forma de mostrar el valor de un objeto dentro de una matriz?
Estoy construyendo un componente en mi proyecto, que en realidad obtiene todos los datos y la consola lo registra, pero aquí está el problema: dentro de mi conjunto de clientes, tengo algunos objetos (dirección, documentos, ...), y puedo No logro llamarlos a mi mesa.
Mi guion:
<script> export default { data: () => ({ clients: [], }), methods: { getClients() { this.$api .get("/api_v1/clientes", { }) .then((response) => { this.clients = response.data[0]; console.log(response.data); }) .catch((e) => { console.log(e); }); }, }, mounted() { this.getClients(); }, }; </script>Mi mesa (adentro):
<tbody> <tr v-for="client in clients" v-bind:key="client.id"> <td>{{ client.id }}</td> <td>{{ client.name }}</td> <td>{{ client.email }}</td> <td>{{ client.documents.cpf || client.documents.cnpj }}</td> <td>{{ client.documents.celular }}</td> <td>{{ client.status }}</td> <td v-if="client.address"> {{ `${client.address.localidade} / ${client.address.uf}` }} </td> <td v-else>-</td> <td> <a :href="`/see-client/${client.id}`" ><i class="icon-magnifier"></i ></a> <i class="icon-check" style="color: green"></i> <i class="icon-close" style="color: red"></i> </td> </tr> </tbody>Mi controlador:
public function index(Request $request) { $data = [ 'pag' => 'All clients', 'link' => '/' ]; return view('clients.index', $data); }Los datos:
¿Alguien tiene una idea de un enfoque diferente que podría tener? Estoy usando Vue2. Es uno de mis primeros grandes proyectos, así que de antemano lo siento por cualquier error de novato. ¡Gracias por tu tiempo y ayuda!
2 answers
Answer question0
Acabo de hacer un análisis rápido de tu código. Creo que deberías pulirlo un poco.
Permítanme comenzar con una actualización rápida: actualice su sección js con:
<script> export default { // Please do use the function format instead of lambda expression, it's recommended in the vue2 docs. data() { return { clients: [], }; }, methods: { // Change this to an async method, so you can have more control on your code. async getClients() { try { /** * Here, you should have to know, that your file `routes/api.php` hass all of the prefixed /api routes * So you have a direct access to /api prefixed routes * Additionally read a little bit about destructuring. */ const response = await this.$api.get("/api/clientes"); // Now, please notice that you have 2 data path names. this.clients = response.data.data; // {or please follow the correct path to the array container of the clients}. } catch (e) { console.log("Check this error: ", e); } }, }, // Now, change your mounted to an async method async mounted() { // Trust me this is going to work perfectly. await this.getClients(); }, }; </script> Ahora, por favor, cambie la lógica de su controlador API a una response()->json(...)
public function index(Request $request) { // Your retrieve logic... return response()->json($data); }Finalmente, si ha configurado correctamente todo lo anterior, su componente vue debería poder recuperar la información correctamente, y su cuerpo debe funcionar de esta manera...
<tbody> <tr v-for="client in clients" v-bind:key="client.id"> <td>{{ client.id }}</td> <td>{{ client.name }}</td> <td>{{ client.email }}</td> <td>{{ client.documents.cpf || client.documents.cnpj }}</td> <td>{{ client.documents.celular }}</td> <td>{{ client.status }}</td> <td v-if="client.address"> <!-- You can replace what you have with: --> {{ client.address.localidade }} / {{ client.address.uf }} </td> <td v-else> - </td> <td> <a :href="`/see-client/${client.id}`"> <i class="icon-magnifier"></i> </a> <i class="icon-check" style="color: green"></i> <i class="icon-close" style="color: red"></i> </td> </tr> </tbody>0
Esta línea solo obtiene el primer cliente:
this.clients = response.data[0]; response.data es su conjunto de clientes (por lo que parece). Cuando usa .data[0] , obtiene el primer elemento de la matriz (es decir, el primer cliente).
Entonces, esta línea está tratando de recorrer 1 cliente, no una matriz de clientes.
<tr v-for="client in clients" v-bind:key="client.id">Intenta cambiar
this.clients = response.data[0];a
this.clients = response.data;Si eso no funciona (parece que tienes una estructura de datos extraña), prueba esto en su lugar:
this.clients = response.data.data; O esto (no me queda claro cuántas propiedades data anidados tiene):
this.clients = response.data.data.data;