Comment mettre à jour le tableau $set dans vue.js

Cette fois, je vais vous montrer comment $set dans vue.js met à jour le array, et comment $set dans vue.js met à jour le tableauNotes Que sont ils ? Voici des cas réels.

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

Lors de l'utilisation de index Lorsque vous définissez 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éclenchez également l'étatMISE À JOUR :

ex :

Donc si vous ajoutez de nouvelles propriétés à l'instance après la création de l'instance, la mise à jour ne sera pas déclenchée.

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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment vue.js déplace la position du tableau et met à jour la vue

Utilisation de vue2- dans Vue Explication détaillée en image et en texte des highcharts

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!