Création de composants en boucle dans Vue

Les composants peuvent être créés en boucle, en leur transmettant les données correspondantes. Voyons comment cela se fait. Supposons que dans le composant parent se trouve le tableau d'objets suivant :

App.vuedata() {
  return {
    users: [
      {
        id: 1,
        name: 'name1',
        surn: 'surn1'
      },
      {
        id: 2,
        name: 'name2',
        surn: 'surn2'
      },
      {
        id: 3,
        name: 'name3',
        surn: 'surn3'
      },
    ],
  }
}

Parcourons ce tableau d'objets avec une boucle et dans la boucle, créons des composants avec les utilisateurs :

App.vue<template>
  <User v-for="user in users" />
</template>

Spécifions les valeurs de l'attribut key pour le bon fonctionnement de la boucle :

App.vue<template>
  <User v-for="user in users" :key="user.id" />
</template>

Transmettons également aux composants leurs données, le nom et le prénom de chaque utilisateur :

App.vue<template>
  <User
    v-for="user in users"
    :name="user.name"
    :surn="user.surn"
    :key="user.id"
  />
</template>

App.vuedata() {
  return {
    users: [
      {
        id: 1,
        name: 'name1',
        salary: 100,
        age: 30,
      },
      {
        id: 2,
        name: 'name2',
        salary: 200,
        age: 40,
      },
      {
        id: 3,
        name: 'name3',
        salary: 300,
        age: 50,
      },
    ],
  }
}