vue操作ul中的li，让每个v-show独立互不干扰

Vue的ul中的li互不干扰

问题描述

在做项目的时候，使用vue的v-for循环遍历每一个对象，并给每一个对象绑定v-show，但是点击事件的时候，所有元素互相干扰，我做的是回复评论部分，点一下，所有评论的回复框都出来了，很麻烦，具体情况如下

修改代码成果

查询资料后修改代码，循环的时候绑定每个对象的index，根据index进行操作，修改后的效果如下，v-show不再互相干扰，效果如下

方案

说下具体思路，

1. 在data设定一个targetIndex（默认 -1）
2. v-for循环的时候每一个li传过去index，
3. 点击事件的时候将本例的index传过去
4. 将targetIndex赋值成传过来的index
5. 在v-for判断targetIndex == index，是的话自然会显示

具体流程

（由于代码有点多和乱，就不全部贴出来了，截取需要修改的地方）
1 targetIndex

2. v-for的时候将index取到

<li v-for="(info,index) in commentList.rows" :key="info.id">

3.绑定点击事件，将index传过去

4 修改targetIndex

5在v-show判断index，

至此，全部完成，能达到想要的效果
想要取消的话直接将targetIndex重新赋值成-1即可