Formulaire pour ajouter des éléments à un tableau dans Vue

Ajoutons réactivement le texte de l'input à la fin du tableau. Passons à la mise en œuvre. Supposons que nous ayons un tableau :

App.vuedata() {
  return {
    items: ['a', 'b', 'c', 'd', 'e'],
  }
}

Ajoutons une propriété newItem, prenant en charge le fonctionnement de l'input :

App.vuedata() {
  return {
    newItem: '',
    items: ['a', 'b', 'c', 'd', 'e'],
  }
}

Affichons le contenu du tableau sous forme de liste :

App.vue<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

Créons maintenant un input et un bouton sur lequel, lors du clic, le texte de l'input sera ajouté à la fin de la liste en tant que nouvel élément :

App.vue<template>
  <input v-model="newItem">
  <button @click="addItem">add</button>
</template>

Lors du clic sur le bouton, la méthode addItem sera appelée, elle prendra le texte de l'input et l'ajoutera comme nouvel élément dans le tableau, ce qui entraînera un changement réactif de la liste :

App.vuemethods: {
  addItem: function() {
    this.items.push(this.newItem);
  }
}