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))来解决。深拷贝后,两个对象,包括其内部的元素互不干扰。

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容