0
238
Vistas¿Cómo llamar a valores de matriz específicos en v-for en Vuejs?
Usuario.vue
<template> <div> <!-- <div class="cont-color">{{ user.name }} {{ user.age }}</div> --> <div v-for="(item, key) in user" :key="key"> {{ item }} </div> </div> </template> <script> import { datalisttwo } from "./datalisttwo"; export default { name: "User", data() { return { lists: datalisttwo, }; }, computed: { user: function () { return this.lists.find((item) => item.cmd_id === this.$route.params.id); }, }, }; </script>Código de trabajo: - https://codesandbox.io/s/hardcore-cartwright-vi6qg?file=/src/components/User.vue
Cómo llamar a un valor específico de una matriz en Vuejs.
En la actualidad, está llamando a todos los valores, desde una matriz. Pero quiero llamar solo a los valores {{name}} y {{age}}.
Si elimino el v-for y escribo directamente así {{ user.name }} {{ user.age }} --> Está imprimiendo los valores de la matriz, pero obteniendo un error como
[Advertencia de Vue]: error en el procesamiento: "TypeError: no se pueden leer las propiedades de undefined (leyendo 'nombre')" TypeError: no se pueden leer las propiedades de undefined (leyendo 'nombre')
3 Respuestas
Responde la pregunta
0
En User.vue tienes esta comparación:
return this.lists.find((item) => item.id === this.$route.params.id); pero los datos que usa de datalisttwo.js no tienen la propiedad id sino cmd_id
Entonces, el resultado de la búsqueda siempre será undefined , que es el error que ve en la consola de JavaScript:
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'name')" por lo que deberá actualizar su find para que sea la siguiente:
return this.lists.find((item) => item.cmd_id === this.$route.params.id);0
Supongo que necesita devolver una matriz en esa propiedad calculada. Utilice filtro en lugar de buscar.
computed: { user: function () { return this.lists.filter((item) => { if(item.cmd_id === this.$route.params.id) { return item } }) } }