vue for循环内点击只显示当前的

Question

拿到了后台给的数据，在循环的时候添加的click，想在点击当前td的时候改变当前下面的show，而不是所有

<tr v-for='(i,index) in data'>
    <td @click="changeData">
      <div v-if="show">{{i.mobileNumber}}</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
</tr>

我想过在拿到后台数据以后自己给每条数据加个show:false,但有没有更好的方法

Answer 1

再添加一个数据项

currentActive: -1

td设置

@click="currentActive = index"

然后div设置

v-if="currentActive == index"

相当于一个游标，指向当前激活数据。

Answer 2

可以利用索引值啊，
data(){
divIndex:-1,
show:false
}
changeData(index){
this.divIndex=index
}

<tr v-for='(i,index) in data'>

<td @click="changeData(index)">
  <div v-if="divIndex==index ? show : !show">{{i.mobileNumber}}</div>
</td>
<td></td>
<td></td>
<td></td>

</tr>

Answer 3

如果是当前show，其它都false的话，可是只用一个参数，当前show，其它!show。
但是如果相互不影响的话，得每条都加上其独有的show。

Answer 4

让后台吐给你的数据中加上一个字段isShow 可以默认为false，点击的时候让它的值为true，这样就能控制每一条了。

Answer 5

数据结构就有问题，这个show是直接放在vue对象的属性data里了，而不是data数组里的每个对象的属性，你的判断条件在那里摆着,还有别用data这个名字，如果用list思维不是更清晰一点吗？
直接去用if (i.show) 去判断，默认肯定是没有这个属性的，点击的时候把当前这条数据的show赋值为true，如果存在，取反就好了