单击后如何仅选择一项要在组件中显示的项目？在 Vue.js 中答案

【问题标题】：How can I select just one item of items to be show in a component after click? in vue js单击后如何仅选择一项要在组件中显示的项目？在 Vue.js 中
【发布时间】：2019-10-03 21:22:12
【问题描述】：

我需要点击图标在子组件“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>

【问题讨论】：

你需要渲染所有的吗？还是只是选定的？
只是选定的

标签： javascript firebase vue.js

【解决方案1】：

这应该可以工作（不确定您是否需要@click here）：

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

【讨论】：

不，我需要单击图标（项目），并在组件中仅显示此数据。我的代码，同时显示所有项目。