Question

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

我的代码：

<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仅扩展单击的数据

2 个答案: