单击由v-for填充的表格单元格后如何显示详细信息？

Question

我有一个显示“匹配项”列表的组件，在单击特定单元格后，它应该显示有关它的具体信息（借助孩子的函数passData(value)）。数据通过v-for显示在表中：

...
<tr v-for="(value,key) in matches" v-bind:key="(value,key)">
        <td v-on:click="passData(value)">{{value.match_id}}</td>
        <td>{{value.duration}}</td>
        <td>{{value.start_time}}</td>
        ...
        <match ref="match"></match>
</tr>
...

所以我要达到的结果应该是这样的： 当用户点击比赛时，它会显示一张“卡片”，其中包含有关该卡片的一些信息，如果用户再次单击它，它就会隐藏。
为了清楚起见，所有组件均正常工作。问题是我无法将其集成到v-for方法中。我只需要在需要的地方显示“卡片”即可。我该怎么办？

我现在所拥有的：

Answer 1

您可以做的是像这样在需要时在每行旁边显示详细信息

<template v-for="(value,key) in matches">
 <tr v-bind:key="(value,key)">
        <td v-on:click="toggleData(value)">{{value.match_id}}</td>
        <td>{{value.duration}}</td>
        <td>{{value.start_time}}</td>
        ...
        <match ref="match"></match>
 </tr>
 <tr v-bind:key="`${key}_details`" v-if="details[value.match_id]">
      ... show whatever you want 
 </tr>
</template>

并在toggleData（value）中 如果不存在，请将其添加，否则将其删除

this.details[value.match_id] = value // if single
this.details[value.match_id] = []    // OR if multiple
this.details[value.match_id].push(value)