vue v-for 只展开点击的数据

Question

我有一个使用 Firebase 的 Vue 项目。我正在使用 v-for 从 Firebase 数据库获取数据，并且我有一个 "description" 值。当用户点击 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>

感谢帮助。

Answer 1

首先你需要了解你的代码实际上在做什么，你正在听 tbody 上的点击，点击它你将标志 isClicked 设置为 true/false，你所有的项目都是 v- if(ed) 在单个标志处，即 isClicked。因此，每当标志更改时，每个 v-if 也会做出反应，这就是显示每个描述的原因，这绝对是不希望的。

听点击tbody是错误的你应该在每个tr-s听点击，这样你才能真正知道点击了哪个tr。现在点击任何 tr，存储该 tr 的 ID 并显示相应项目的描述。

好吧，您实际上可以在代码中做一些小的工作，使其按您的需要工作。

这里是修改后的代码。

<tbody v-for="item in items" :key="item.id">

        <tr @click="isClicked = item.id">
          <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 === item.id">  
          {{item.desc}}
        </tr>
      </tbody>

希望对您有所帮助。

Answer 2

获取循环索引：

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>

vue v-for 只展开点击的数据

Vue v-for expand only clicked data

javascript

vue.js

v-for