Méthodes de mise à jour $ set et array dans vue.js_vue.js

Je vais maintenant partager avec vous un article sur les méthodes de mise à jour de $set et de tableau dans vue.js. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

En raison des limitations de JavaScript, Vue ne peut pas détecter les tableaux modifiés suivants :

Lors de l'utilisation d'un index pour définir directement un élément du tableau, par exemple : vm.items[indexOfItem] = newValue

Lorsque vous modifiez la longueur du tableau, par exemple : vm.items.length = newLength, le tableau ne sera pas mis à jour.

Bien sûr, il existe une solution dans vue, qui est d'utiliser Vue.set, vm.$set (une variante de Vue.set) ou splice, caoncat, etc. pour modifier le tableau, ce qui déclenche également une mise à jour du statut :

ex :

Donc si vous ajoutez de nouvelles propriétés à l'instance une fois l'instance créée, elle ne déclenchera pas le renouvellement.

ps : Maintenant, il y a deux tableaux, arr1 et arr2 Si arr1 change le tableau en attribuant une valeur d'indice, et arr2 change le tableau avec $set, quel est le résultat ?

data:{
 arr1 = ['a','b','c'];
 arr2 = [‘foo','bar','baz'];  
}

vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');

D'après ce que nous avons dit au début que changer le tableau en fonction de l'index de l'indice ne peut pas déclencher une mise à jour du statut, nous saurons que : le deuxième changement du premier tableau ne sera pas mis à jour le page, seule la modification du deuxième tableau Les modifications seront mises à jour sur la page. Cependant, le résultat est :

arr1 = ['a', 'alpha', 'b', 'c'];
arr2 = [‘foo', 'alpha', 'bar','baz'];

Les valeurs​​des deux tableaux sont mises à jour. En d'autres termes, lorsque arr2 est mis à jour à l'aide de la méthode $set(), la page sera complètement mise à jour.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Méthode de valeur sélectionnée JQuery du composant sélectionné

Méthode de fractionnement de code dans React-Router4 (basée sur Webpack)

Méthode vue.js pour déplacer la position du tableau et mettre à jour la vue en même temps

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!