时间戳

首页 > 解决方案 > 单击v-for填充的表格单元格后如何显示详细信息？

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

问题描述

我有一个显示“匹配项”列表的组件，单击特定单元格后，它应该显示有关它的具体信息（借助 child's function 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 方法中。我只需要在需要的地方显示一张“卡片”。我怎样才能做到这一点？

我现在拥有的： 在此处输入图像描述

标签： vue.jsvue-component

解决方案

如果需要，您可以做的是这样的事情，以显示旁边每一行的详细信息

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

推荐阅读