效果:
<view class="list-item" v-for="(item,index1) in listData" :key="index1">
<view class="item-title" @click="item.content.length>0?handleToggle(item,index1):''">
<view class="">{{item.title}}</view>
<u-icon :name="item.isToggle ? 'arrow-right' : 'arrow-down'"></u-icon>
</view>
<view class="item-content" v-show="!item.isToggle">
<view class="content-sel" v-for="(c,index2) in item.content" :key="index2">
{{c.title}}
</view>
</view>
</view>
listData:[
{
title:"新疆",
isToggle:false,
content:[
{title:"新疆大明矿业1"},
{title:"新疆大明矿业2"}
],
},
{
title:"山东",
isToggle:false,
content:[
{title:"山东矿业1"},
{title:"山东矿业2"}
],
}
],
handleToggle(item,index1){
item.isToggle = !item.isToggle;
console.log(item.isToggle,"item.isToggle")
}
小程序打印的结果:值一直为true
如果你试过v-if不生效,又试了v-show,还是不行!!千万不要着急!
不是自己写的不对,而是uni-app和微信小程序修改值的方式不一致造成的。反正就是不承认是自己的问题。
其实解决的办法也很简单,就是要兼容两端,写出符合让两端都适合的代码 。
既然这样直接修改值不行,那就从根本出发。
handleToggle(item,index1){
// item.isToggle = !item.isToggle;
this.listData.forEach((item,index)=>{
if(index1 === index){
item.isToggle = !item.isToggle;
}
})
console.log(item,"item.isToggle")
}