文章目录
- 导文
- 文章重点
- 方法一:使用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里面使用:
<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)