To view the data of a specific item in the child component "comandasInd", I just need to click on the icon.
<template>
<v-data-table :items="comandas">
<template v-slot:items="props">
<td>{{ props.item.nombre }}</td>
<v-icon @click="abrirComanda(props.item)">
book
</v-icon>
</template>
</v-data-table>
...
The issue is that all components and items are being opened when I only want to display the clicked one:
<comandasInd
v-for="comanda in comandas"
:key= "comanda.cid"
:nombre="comanda.nombre"
@click="abrirComanda(item)">
</comandasInd>
<script>
export default {
components: { comandasInd },
data: () => ({
comandas: [],
comanda: {
nombre: '',
}
selectComanda: null,
}),
methods: {
abrirComanda(comandas) {
this.selectComanda = comandas.nombre
}
</script>