L’une des tâches les plus courantes dans le développement web est le rendu de listes de données. Vue s’en charge avec l’aide de la classe v-for . Vous découvrirez ce qu’est la directive v-for, comment supprimer des éléments d’une liste et comment rendre les listes avec des clés.


Qu’est-ce que la directive v-for dans Vue ?

La directive v-for est l’une des directives de Vue qui vous permet de rendre des listes avec un minimum de code JavaScript. La directive v-for fonctionne de la même manière que la boucle for en JavaScript et permet d’itérer sur des tableaux et des objets pour rendre les éléments d’une liste.

Pour utiliser la directive v-pour fournir un tableau sur lequel vous voulez itérer dans la directive données de l’objet Options dans Vue.

Par exemple :

 <template>
  <ul>
    <li v-for="name in names">{{ name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      names: ['John', 'Doe', 'James'],
    };
  },
};
</script>

Le bloc de code ci-dessus illustre un exemple d’application Vue qui utilise la fonction v-for qui permet d’itérer sur l’ensemble des noms qui est fourni dans le tableau données propriété.

v-for a pour valeur une expression composée de deux parties : la variable d’itération (nom) et le noms tableau v-for pointe vers. La variable d’itération contient chaque nom dans le noms et affiche le tableau nom.

Vue crée un nouvel élément DOM (Document Object Model) pour chaque élément de l’image. nom dans le noms et le rend sur la page web.

Si l’option noms change (par exemple, un nouveau nom est ajouté ou un ancien est supprimé), Vue mettra automatiquement à jour le DOM virtuel et redessinera la liste pour refléter les données mises à jour.

Lire  Enigma : Une Révolution Cryptographique qui Transforme Toujours Notre Monde Numérique

Vue offre également un moyen d’obtenir l’index d’un élément dans une liste.

 <li v-for="(name,index) in names">{{ name }} -- {{ index }}</li>

Le code ci-dessus décrit la syntaxe pour afficher l’index de chaque élément de la liste. nom dans le noms tableau.

Vous pouvez également utiliser la fonction v-for pour parcourir en boucle une plage de nombres :

 <li v-for="num in 10">Vue is Nice</li>

Le code ci-dessus affichera une liste avec le texte Vue is Nice dix fois. Les v-for peut également parcourir en boucle une plage de nombres afin d’afficher des données ou d’effectuer une opération de manière répétée. Dans ce cas, la directive num La variable itération est utilisée pour accéder à l’élément courant de la liste.

Comment supprimer des éléments d’une liste dans Vue

Vous pouvez autoriser les utilisateurs à supprimer des éléments d’une liste dans votre application web. Cette fonctionnalité est utile pour créer des applications telles qu’une liste de choses à faire.

Vous pouvez utiliser la fonction épissage Méthode JavaScript (qui est l’une des façons de supprimer des éléments d’un tableau) pour supprimer un élément d’une liste dans Vue.

 array.splice(startIndex, numToRemove, newElements)

La méthode splice permet d’ajouter ou de supprimer des éléments d’un tableau. La méthode splice prend en compte les paramètres dans l’ordre suivant :

  1. Le paramètre startIndex définit l’index à partir duquel la modification du tableau doit commencer.
  2. numToRemove indique le nombre d’éléments à supprimer du tableau.
  3. Enfin, la fonction nouveauxéléments que vous pouvez utiliser pour ajouter des éléments au tableau. Si aucun élément n’est spécifié, splice() ne supprimera que des éléments du tableau.

Lire  Comment installer les composants individuels de LibreOffice sous Linux

Pour utiliser la méthode splice afin de supprimer un élément d’une liste dans Vue, vous devez connaître l’index de cet élément. Une façon d’y parvenir est de passer la méthode index comme argument d’une méthode qui gère le retrait de l’élément.

Par exemple, vous pouvez ajouter un bouton à côté de chaque nom dans le tableau qui déclenche une méthode pour supprimer l’élément lorsque l’utilisateur clique dessus :

 <template>
  <ul>
    <li v-for="(name,index) in names">
      {{ name }} -- {{ index }}
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
</template>

Le bouton index nous donne accès à l’index de chaque nom dans le tableau, que ce programme passe comme argument à la fonction removeItem méthode. La méthode removeItem peut alors utiliser la méthode épissage méthode pour supprimer un nom de la noms tableau :

 <script>
export default {
  data() {
    return {
      names: ['John', 'Doe', 'James'],
    };
  },
  methods: {
  removeItem(index) {
    this.names.splice(index, 1);
  }
}
};
</script>

Le script ci-dessus utilise la fonction épissage pour supprimer un nom de la liste des noms rendus. Cela mettra automatiquement à jour la liste dans l’interface utilisateur pour refléter le tableau mis à jour.

Comment rendre des listes avec des clés dans Vue

Le clé est un attribut unique que Vue utilise pour suivre l’identité de chaque élément de la liste. Lorsqu’un élément de la liste change, avec l’aide de l’attribut clé attribut Vue peut rapidement mettre à jour le DOM sans re-rendre la liste entière.

Voyons un exemple de rendu d’une liste avec des clés dans Vue :

 <template>
  <div>
    <ul>
      <li v-for="name in names" :key="name.id">
        {{ name.name }}
        <button @click="removeItem(name.id)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: [
        { id: 1, name: "John"},
        { id: 2, name: "Doe"},
        { id: 3, name: "James"},
      ],
    };
  },
  methods: {
    removeItem(key) {
      this.names.splice(key - 1, 1);
    },
  },
};
</script>

Dans cet exemple, vous avez une liste d’éléments avec des clés uniques. id propriétés. Le bloc de code utilise la propriété clé avec l’attribut v-for pour suivre l’identité de chaque élément de la liste. Cela permet à Vue de mettre à jour efficacement le DOM lorsque la liste change.

Lire  4 Signes qu'il est probablement temps de réinitialiser votre PC Windows

Si vous supprimez un élément de la liste, Vue met à jour le DOM sans avoir à re-rendre la liste entière. En effet, Vue détient l’identité de chaque élément de la liste et ne peut mettre à jour que les éléments qui ont changé.

Le clé doit être un identifiant unique pour chaque élément de la liste. Il peut s’agir d’un id ou tout autre identifiant unique pouvant être utilisé pour suivre l’article.

L’utilisation de l’outil clé avec l’attribut v-for permet d’éviter les problèmes de rendu. Par exemple, lors de la suppression des noms, Vue utilise la directive clé pour maintenir l’ordre des éléments de la liste.

Les directives Vue sont essentielles

Vous avez abordé ici les bases du rendu des listes dans Vue, notamment la suppression d’éléments dans les listes et le rendu des listes avec des clés. Vous pouvez construire des interfaces réactives qui gèrent des listes de données complexes en comprenant ces concepts.

Vue dispose d’une pléthore de directives pour différents objectifs, y compris le rendu conditionnel, la liaison d’événements et la liaison de données. La compréhension de ces directives peut vous aider à créer des applications web interactives efficaces.