vue 改变数据后，数据变化页面不刷新

文章目录

• 导文
• 文章重点
• • • 方法一：使用this.$forceUpdate()强制刷新
    • 方法二：Vue.set(object, key, value)
    • 方法三：this.$nextTick
    • 方法四：$set方法

      ---

      导文

      在vue项目中，会遇到修改完数据，但是视图却没有更新的情况

      vue 改变数据后，数据变化页面不刷新

      vue 改变数据后，需要滑动页面，数据才更新

      vue中表格数据已改变，页面却未更新数据

      文章重点

      方法一：使用this.$forceUpdate()强制刷新

      使用方法：直接调用即可，或者放到html里面使用

      直接调用:

       this.list.forEach((item)=>{...})console.log(this.list,'this.list')this.$forceUpdate()

      放到html里面使用:

      ...

      方法二：Vue.set(object, key, value)

      使用方法：

      add() {  this.$set(this.obj, 'name', '张三')}

      方法三：this.$nextTick

      this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

      this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。

      使用方法：

       this.$nextTick(() => {  this.handerErrors()})

      方法四：$set方法

      使用方法：

      //原代码this.list.a=1//使用set方法this.$set(this.list,'a',1)