Как выбрать только один элемент из элементов, которые будут отображаться в компоненте после нажатия? в Vue JS

Question

Мне нужно щелкнуть значок, чтобы отобразить в дочернем компоненте "comandasInd" данные одного элемента

<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>
...

Это компонент, но откройте все компоненты со всеми имеющимися у меня элементами, имне нужен только тот, на который я нажал:

<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>

Answer 1

Это должно работать (не уверен, если вам нужен @ нажмите здесь):

<comandasInd 
  v-if="selectComanda"
  :key= "selectComanda.cid"
  :nombre="selectComanda.nombre">
</comandasInd>                 

<script>
  export default {
    components: { comandasInd },    
    data: () => ({
      comandas: [],
      comanda: {
        nombre: '',
      }
      selectComanda: null,
   }),
   methods: {
     abrirComanda(comanda) {    
         this.selectComanda = comanda;
      }
   }
</script>