vue改变数据后数据变化页面不刷新的解决方法

导文

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

• vue 改变数据后，数据变化页面不刷新
• vue 改变数据后，需要滑动页面，数据才更新
• vue中表格数据已改变，页面却未更新数据

文章重点

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

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

直接调用:

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

放到html里面使用:

<el-select v-model="..." @change="$forceUpdate()" placeholder="请选择">
...
</el-select>

方法二：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)

总结

到此这篇关于vue改变数据后数据变化页面不刷新解决的文章就介绍到这了,更多相关vue数据变化页面不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！