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

2023-05-16 15:34:25 浏览数 (1)

导文

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

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

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

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

文章重点

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

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

直接调用:

代码语言:javascript复制
 this.list.forEach((item)=>{

...

})

console.log(this.list,'this.list')

this.$forceUpdate()

放到html里面使用:

代码语言:javascript复制
<el-select v-model="..." @change="$forceUpdate()" placeholder="请选择">

...

</el-select>

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

使用方法:

代码语言:javascript复制
add() {

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

}

方法三:this.$nextTick

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

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

使用方法:

代码语言:javascript复制
 this.$nextTick(() => {

  this.handerErrors()

})

方法四:$set方法

使用方法:

代码语言:javascript复制
//原代码

this.list.a=1

//使用set方法

this.$set(this.list,'a',1)

0 人点赞