Vue中一次性遍历同一个点击事件且操作互不影响

前言:以下是通过点击事件改变图片的小demo步骤

1.动态在返回的数组中动态插入一个showComment字段

//说明：this.projectList是接口返回的list，在后台的返回的数据中插入一个变量showComment 设置布尔值为false

 this.projectList.forEach((v, k) => {
      this.projectList[k].showComment = false;
 });

2.触发点击事件的时候

<div v-for="(itmPro, index) in projectList" :key="index">
<div @click="like(itmPro)">
      <img v-if="!itmPro.showComment" class="likeimage" :src="bg" />
      <img v-else class="likeimage" :src="bg1" />
</div>
</div>

3.点击事件触发后再将showComment的布尔值取反再更新数组

like(item) {
     xxxr().then(res => {
       if (res.data.code === 200) {
          item.showComment = !item.showComment;
          // 深拷贝
          let list = this.projectList;
          this.projectList = Object.assign([], list);
        } else {
          this.$message.warning(res.data.msg);
       }
   });
},

注意:虽然输出projectList数组看是已经showComment字段是已经改变，但是在视图层那块Vue没有自动更新。

所以运用了Object.assign()方法通过浅拷贝来更新数组。浅拷贝是拷贝引用，拷贝后的引用都是指向同一个对象的实例，彼此之间的操作会互相影响.

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