Réactivité des tableaux dans Vue
La réactivité fonctionne même avec les changements
des tableaux affichés via v-for.
Prenons un exemple : faisons en sorte que
lorsqu'on clique sur un bouton, un nouvel élément
soit ajouté réactivement au tableau et que les changements
apparaissent instantanément à l'écran.
Implémentons ce qui a été décrit. Supposons que nous ayons un tableau :
data() {
return {
arr: ['a', 'b', 'c'],
}
}
Affichons les éléments de ce tableau dans une boucle :
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
Créons un bouton qui, lorsqu'on clique dessus, ajoutera un nouvel élément au tableau :
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">add</button>
</template>
Implémentons la méthode correspondante :
methods: {
add: function() {
this.arr.push('xxx');
}
}
Un bouton est donné. Un tableau est donné. Affichez les éléments
de ce tableau sous forme de liste ul. Faites
en sorte qu'en cliquant sur le bouton, un nouvel élément
soit ajouté à la fin de cette liste.
Un bouton est donné. Un tableau est donné. Affichez les éléments
de ce tableau sous forme de liste ul. Faites
en sorte qu'à chaque clic sur le bouton,
le premier élément de la liste soit supprimé.
Un bouton est donné. Un tableau est donné. Affichez les éléments
de ce tableau sous forme de liste ul. Faites
en sorte qu'à chaque clic sur le bouton,
le dernier élément de la liste soit supprimé.
Un bouton est donné. Un tableau est donné. Affichez les éléments
de ce tableau sous forme de liste ul. Faites
en sorte qu'à chaque clic sur le bouton,
l'avant-dernier élément de la liste soit supprimé.
Un bouton est donné. Un tableau est donné. Affichez les éléments
de ce tableau sous forme de liste ul. Faites
en sorte qu'en cliquant sur le bouton,
les éléments de la liste soient triés.
Un bouton est donné. Un tableau est donné. Affichez les éléments
de ce tableau sous forme de liste ul. Faites
en sorte qu'en cliquant sur le bouton,
les éléments de la liste soient inversés.
Exceptions
En raison des limitations du JavaScript, Vue n'est pas capable
de détecter les changements suivants dans un tableau :
l'assignation directe d'un élément par son index : items[clé]
= nouvelleValeur et le changement explicite de la longueur
du tableau, par exemple : items.length = nouvelleLongueur.
