Estoy tratando de obtener los datos de una clave de objeto dentro de una matriz con un clic. Intenté de varias maneras pero no pude hacerlo. Cualquier ayuda sería apreciada.
Estos son mis datos :
data:[{ name:aaa, mail:abc@gmail.com types: [ { name: '1', type: 'a' }, { name: '2', type: 'b' }, { name: '3', type: 'c' }, ], }, { name:bbb, mail:def@gmail.com types: [ { name: '1', type: 'a' }, { name: '2', type: 'b' }, { name: '3', type: 'c' }, ], }]Y mi parte html :
<tr v-for="(data, index) in item.data" :key="index"> <td class="text-center"> {{ data.name }} </td> <td class="text-center"> <v-btn icon @click="getItem(item)" ><v-icon size="25">mdi-domain</v-icon></v-btn> </td> </tr> así que básicamente estoy tratando de obtener el valor de type en la matriz de types del elemento seleccionado en el ciclo.
No estoy del todo seguro de lo que estás tratando de lograr aquí. Si está tratando de representar cada objeto dentro de types , mostrando el nombre y luego enviando el tipo cuando se hace clic, puede hacer algo como esto.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> <div id="app"></div> <script> new Vue({ methods: { getType(type) { //do whatever console.log(type) } }, data: () => ({ data:[{ name:"aaa", mail:"abc@gmail.com", types: [ { name: '1', type: 'a' }, { name: '2', type: 'b' }, { name: '3', type: 'c' } ] }, { name:"bbb", mail:"def@gmail.com", types: [ { name: '1', type: 'a' }, { name: '2', type: 'b' }, { name: '3', type: 'c' } ] }] }), template: ` <table> <tr v-for="item in data"> <td v-for="type in item.types" @click="getType(type.type)"> {{type.name}} </td> </tr> </table> ` }).$mount('#app'); </script> <style> td { cursor: pointer; padding: 5px 7px; border: 1px solid black; margin: 5px; } </style>html:
<tr v-for="(data, index) in item.data" :key="index"> <td class="text-center"> {{ data.name }} </td> <td class="text-center"> <v-btn icon @click="getTypes(data.types)" ><v-icon size="25">mdi-domain</v-icon></v-btn > </td> </tr>guion:
data() { return { item: { data: [ { name: "aaa", mail: "abc@gmail.com", types: [ { name: "1", type: "a" }, { name: "2", type: "b" }, { name: "3", type: "c" }, ], }, { name: "bbb", mail: "def@gmail.com", types: [ { name: "1", type: "a" }, { name: "2", type: "b" }, { name: "3", type: "c" }, ], }, ], }, }; }, methods: { getTypes(types) { let blankTypes = types.map((type) => type.type); console.log(blankTypes); // access types here }, },Creo que la estructura de datos que propuso y su plantilla no coinciden.
Está iterando item.data... pero no hay ninguna propiedad de datos para cada elemento de la matriz.
Además, en su muestra de datos muestra data = [] .. pero en su plantilla muestra data.name : la matriz de datos no tiene un nombre de propiedad.
Entonces, suponiendo una matriz data = [] de items (cada uno de los cuales tiene una matriz de tipos), debe iterar tanto el item in data Y el type in item.types y pasar AMBOS el elemento y el tipo a la función del controlador:
<tr v-for="(item, index) in data" :key="index"> <td class="text-center"> {{ item.name }} </td> <td class="text-center"> <template v-for="type in item.types"> <v-btn icon @click="getTypes(item, type)"> <v-icon size="25">mdi-domain</v-icon></v-btn> </td> </tr>