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

原创已于 2022-06-27 17:25:57 修改 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-05-30 19:09:51 首次发布

前端高亮效果专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Vue.js在列表中实现元素的点击高亮和取消高亮功能，通过操作对象属性并触发视图更新来实现实时交互。

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

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