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 :

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

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

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

Affichons le contenu du tableau sous forme de liste :

<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 :

<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 :

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

Un tableau est donné. Un input est donné. Un bouton est donné. Affichez les éléments de ce tableau sous forme de liste ul. Faites en sorte qu'au clic sur le bouton le texte de l'input soit ajouté à la fin de la liste.

Modifiez la tâche précédente pour que le nouvel élément soit ajouté au début de la liste.