Comment résoudre le problème de la non-mise à jour de la vue lorsque les propriétés de l'objet sont modifiées dans Vue ?

Ci-dessous, je partagerai avec vous un article qui résout le problème de la non-mise à jour de la vue lorsque les propriétés d'un objet sont modifiées dans Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Normalement, nous définissons les données de réponse dans les données de l'instance vue. Mais lorsque la donnée est un objet et que l'on ajoute ou supprime la valeur de l'attribut de l'objet, la vue ne déclenche pas de mise à jour. Comment résoudre ce problème ?

L'exemple de code est le suivant :

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

Il existe trois solutions :

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

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

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

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

Option 3 : Utiliser Object.assign({}, this.obj) pour créer un nouvel objet

Exemple :

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

ou

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à l'avenir. Utile à tout le monde.

Articles associés :

Comment ajouter, supprimer et modifier des méthodes de requête via des tables dans AngularJs

Comment utiliser ExtJs pour intégrer Echarts (tutoriel détaillé)

Comment ajouter et supprimer dynamiquement des méthodes div dans angulaireJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!