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

关注

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

weblogic等保测评操作过程 weblogic网络安全等级测评保护操作阅读详情

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

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')

收录于