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

Mr_Fu
  • 287

拿到了后台给的数据,在循环的时候添加的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,但有没有更好的方法

评论
阅读 4.7k
5 个回答

再添加一个数据项

currentActive: -1

td设置

@click="currentActive = index"

然后div设置

v-if="currentActive == index"

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

可以利用索引值啊,
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>

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

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

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

宣传栏