Vue等如何一次性遍历同一个事件且操作互不影响？

之前碰到个问题，遍历数组的时候,有同一个事件操作,但是每次一点击的时候其他的也会跟着受影响。好比如我前些天开发的类似朋友圈评论功能。多条好友动态,每条动态里头都有个评论、点赞等功能..刚开始遍历出来后一点评论，其他的也会跟着评论...
Share下我的思路,每条动态都跟着一个是否评论的字段，根据该字段来得知当前动态的评论状态。这样遍历出来的事件操作就互不影响了。

先看看我处理后的效果~

效果图.png

处理步骤

• 动态插入一个showComment字段
• 根据showComment字段来判断是否显示评论模块
• click事件触发后再将showComment的布尔值取反再更新数组

---

动态插入字段.png 判断是否显示评论模块.png 点击评论事件.png
更新数组.png

在更新数组这块顺便记录下,原先以为直接通过item.showComment = !item.showComment就可以直接改变数组,虽然输出momentList看是已经showComment字段是已经改变，但是在视图层那块Vue没有自动更新。所以运用了Object.assign()方法通过浅拷贝来更新数组。顺便回顾下浅拷贝。浅拷贝是拷贝引用，拷贝后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响

还有种更新数组方法就是深拷贝了。通过JSON.parse(JSON.stringify(list))来解决。深拷贝后，两个对象，包括其内部的元素互不干扰。

以上有什么问题都可以交流哦~
理解错误的地方也可以指出来;）