vue数据改变，视图不更新问题

关注

原创 2022-06-27 17:25:57 359 阅读 AI 写同款· GEO 优化 ›

PSCAD学习笔记（1）Project Settings（重点snapshot设置）若不勾选，则横坐标为实际时间2-7s，故障显示在第3s发生。图片中时间坐标轴显示为0-5s，故障时刻显示为第1s，即0-1s展示系统稳态，1-5s展示系统发生故障后的暂态响应，如何通过快照文件实现？勾选该项后，使用快照文件启动仿真会将仿真起始时间强制设置为0s，反之不勾选则依据快照文件保存的时间轴继续（即坐标为实际时间）。如果已有的快照文件保存的是0s至5s的仿真内容，则仿真运行时间从5s开始，到10s结束。如果已有的快照文件保存的是0s至2s的仿真内容，则仿真运行时间从2s开始，到7s结束；阅读详情

应用场景:点击之后添加高亮，再次点击则取消高亮

html:
<ul class="service-team-content">
            <li
              v-for="(item, index) in 10"
              :key="index"
              :class="{ activeCss: serviceActiveArr[`${index}`] == index }"
              @click="activeFn(index)"
            >
              这是 {{ index }}当前{{ serviceActiveArr[`${index}`] }}
            </li>
          </ul> 

js:
  data() {
    return {
      active: 2,
      serviceAll: [],
      popShow: false,
      serviceActive: 1,
      serviceActiveArr: {},
    }
  },
methods:{
activeFn(index) {
      // 给对象重新改堆内存 触发视图更新(只改变对象的键是不会触发视图更新的)
      let newServiceActiveArr = Object.assign({}, this.serviceActiveArr) // Object.assign拷贝当前对象
      if (newServiceActiveArr[`${index}`] === undefined) {
        newServiceActiveArr[`${index}`] = index
      } else {
        delete newServiceActiveArr[`${index}`]
      }
      this.serviceActiveArr = newServiceActiveArr // 再给对象赋值做视图更新
      console.log(this.serviceActiveArr, 'this.serviceActiveArr')
    },
}

关于对象内的属性改变不更新视图：

方法1:this.$forceUpdate

方法2:Object.assign({}，this.obj)

方法3: this.$set(this.obj,'k1','v1')

收录于