uni-app implements click to display hidden list, compatible with WeChat applet

Effect: 

<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")
}

The result printed by the applet: the value is always true

 

If you tried v-if and it didn't work, then tried v-show, it still doesn't work! ! Don't worry!

It's not that I wrote it wrong, but it's caused by the inconsistent way of modifying values ​​between uni-app and WeChat applet. Anyway, it is not admitting that it is my own problem.

In fact, the solution is also very simple, that is, to be compatible with both ends, and to write code that fits both ends.

Since it is not possible to directly modify the value in this way, let's start from the root.

handleToggle(item,index1){
	// item.isToggle = !item.isToggle;
	this.listData.forEach((item,index)=>{
		if(index1 === index){
			item.isToggle = !item.isToggle;
		}
	})
	console.log(item,"item.isToggle")
}