Article directory
Introduction
In the vue project, you will encounter the situation that the data is modified, but the view is not updated.
After changing the data in vue, the data change page does not refresh
vue. After changing the data, you need to slide the page to update
the data. The table data in vue has changed, but the page is Data not updated
article focus
Method 1: Use this.$forceUpdate() to force refresh
How to use: Just call it directly, or use it in html
Call directly:
this.list.forEach((item)=>{
...
})
console.log(this.list,'this.list')
this.$forceUpdate()
Put it in html and use:
<el-select v-model="..." @change="$forceUpdate()" placeholder="请选择">
...
</el-select>
Method 2: Vue.set(object, key, value)
Instructions:
add() {
this.$set(this.obj, 'name', '张三')
}
Method 3: this.$nextTick
this.$nextTick delays the callback until after the next DOM update cycle. Use it immediately after modifying the data, then wait for the DOM to update.
this.$nextTick is the same as the global method vue.nextTick, the difference is that the this of the callback is automatically bound to the instance that calls it.
Instructions:
this.$nextTick(() => {
this.handerErrors()
})
Method 4: $set method
Instructions:
//原代码
this.list.a=1
//使用set方法
this.$set(this.list,'a',1)