How to deal with the problem of view not updating when object properties are changed in Vue?

Below I will share with you an article that solves the problem of view not updating when object properties are changed in Vue. It has a good reference value and I hope it will be helpful to everyone.

Normally, we set the response data in the data of the vue instance. But when the data is an object and we add or delete the object attribute value, the view does not trigger an update. How to solve this problem?

The example code is as follows:

let vm = new Vue{
 el: '#app',
 data: {
  obj: {
    k: 'v'
  }
 },
 ...
}

There are three solutions:

Option 1: Use Vue.set(object,key,val)

Example: Vue.set(vm.obj,'k1','v1 ')

Option 2:Use this.$set(this.obj,key,val)

Example: this.$set( this.obj,'k1','v1')

Option 3:Use Object.assign({}, this.obj) to create a new object

Example:

 this.obj.k1='v1'；
 this.obj = Object.assign({}, this.obj)

or

this.obj = Object.assign({}, this.obj,{'k1','v1'})

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to add, delete and modify query methods through tables in angularJs

How to use ExtJs to integrate Echarts (detailed tutorial)

How to dynamically add and delete div methods in angularJS

The above is the detailed content of How to deal with the problem of view not updating when object properties are changed in Vue?. For more information, please follow other related articles on the PHP Chinese website!