Maison > interface Web > js tutoriel > Méthodes de mise à jour $ set et array dans vue.js_vue.js

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

亚连
Libérer: 2018-05-31 17:02:47
original
2987 Les gens l'ont consulté

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');
Copier après la connexion

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'];
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal