After vue changes the data, the data change page does not refresh

---

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)