Tableaux

Considérons un tableau simple :

const listeElements = ['a', 'b', 'c']; // Un tableau ordinaire

Les opérations suivantes ne déclencheront pas la réactivité de Vue :

this.listeElements[1] = 'x'; // Modifier un élément existant
this.listeElements[3] = 'd'; // Ajouter un nouvel élément
this.listeElements.length = 2; // Modifier la longueur du tableau

Pour un tableau d'objets :

const donneesMessages = [
  { id: 1, selectionne: true, titre: 'alpha' },
  { id: 2, selectionne: false, titre: 'beta' },
  { id: 3, selectionne: true, titre: 'gamma' }
];

Les modifications directes suivantes ne seront pas détectées :

this.donneesMessages[0] = { id: 1, selectionne: true, titre: 'ALPHA' }; // Modifier un élément
this.donneesMessages[3] = { id: 4, selectionne: true, titre: 'DELTA' }; // Ajouter un élément
this.donneesMessages[0].enfant = "Enfant"; // Ajouter une propriété à un élément

Solutions

Utilisation de Array.splice()

La méthode splice(index, nombre, nouvelElement) modifie le tableau en place et peut être utilisée pour ajouter, supprimer ou remplacre des éléments.

Utilisation de this.$set()

La méthode this.$set(tableau, index, nouvelElement) permet de modifier un élément de manière réactive.

// Modification d'un élément existant
this.$set(listeElements, 1, 'x');
this.listeElements.splice(1, 1, 'x');

// Ajout d'un nouvel élément
this.$set(listeElements, 3, 'd');
this.listeElements.splice(3, 0, 'd');

// Modification de la longueur
this.listeElements.splice(2);

// Pour un tableau d'objets
this.$set(donneesMessages, 0, { id: 1, selectionne: true, titre: 'ALPHA' });
this.donneesMessages.splice(0, 1, { id: 1, selectionne: true, titre: 'ALPHA' });

this.$set(donneesMessages, 3, { id: 4, selectionne: true, titre: 'DELTA' });
this.donneesMessages.splice(3, 0, { id: 4, selectionne: true, titre: 'DELTA' });

Méthodes de mutation de tableau dans Vue

Ces méthodes modifient le tableau original et déclenchent la réactivité :

• push() : Ajoute un élément à la fin et retourne la nouvelle longueur.
• pop() : Supprime le dernier élément et retourne l'élément supprimé.
• shift() : Supprime le premier élément et retourne l'élément supprimé.
• unshift() : Ajoute un élément au début et retourne la nouvelle longueur.
• splice() : Modifie le contenu du tableau en ajoutant ou supprimant des éléments.
• sort() : Trie les éléments du tableau et retourne le tableau trié.
• reverse() : Inverse l'ordre des éléments et retourne le tableau inversé.

D'autres méthodes ne modifient pas le tableau original et retournent un nouveau tibleau, sans déclencher la réactivité :

• slice() : Extrait une section du tableau et retourne un nouveau tableau.
• concat() : Fusionne plusieurs tableaux et retourne un nouveau tableau.
• join() : Joins tous les éléments en une chaîne de caractères.
• filter() : Crée un nouveau tableau avec les éléments qui passent un test.

Note importante : Modifier directement une propriété d'un élément existant dans un tableau d'objets via l'index déclenche bien la mise à jour de la vue, car la réactivité de Vue observe les propriétés des objets.

this.donneesMessages[0].titre = "ALPHA"; // Cela met à jour la vue

Objets

Pour les objets, des principes similaires s'appliquent. L'utilisation de this.$set() ou la modification directe de propriétés existantes est recommandée pour garantir la réactivité.

Référence

Pour plus de détails sur le principe de réactivité de Vue, consultez la documentation officielle : Vue Reactivity in Depth.