时间戳

首页 > 解决方案 > Vue v-for 只展开点击的数据

javascript - Vue v-for 只展开点击的数据

问题描述

我有一个带有 Firebase 的 Vue 项目。我正在使用 v-for 从 Firebase 数据库获取数据，并且我有一个“描述”值。当用户单击 tr 上的任意位置时，我想展开并仅显示单击值的描述。但在我的代码中；当我单击 tbody 时展开所有描述值。我怎样才能解决这个问题？

我的代码：

<tbody v-for="item in items" :key="item.id" @click="isClicked = !isClicked">

        <tr >
          <td>
            {{item.name}} 
          </td>
          <td>
            {{item.surname}}
          </td>
          <td>
            {{item.explanation}}
          </td>
        <td>
          <span @click="isDelete(item)">X</span>
        </td>
        </tr>
        <tr v-if="isClicked === true">  
          {{item.desc}}
        </tr>
      </tbody>

感谢您的帮助。

标签： javascriptvue.jsv-for

解决方案

获取循环的索引：

v-for="(item, index) in items"

创建一个接受索引作为参数的函数：

setActiveRow(index)

分配index给isClicked变量：

setActiveRow(index) {
  this.isClicked = index
}

现在将其用作您的点击功能并比较isClicked行中的变量：

<tbody v-for="(item, index) in items" :key="item.id" @click="setActiveRow(index)">

然后仅在索引匹配时显示特定行：

<tr v-if="isClicked === index">
  <td> {{ item.desc }} </td>
</tr>

推荐阅读