Formulier voor het toevoegen van array-elementen in Vue

Laten we reactief tekst uit het invoerveld aan het einde van de array toevoegen. Laten we beginnen met de implementatie. Stel dat we een array hebben:

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

Laten we de eigenschap newItem toevoegen, die de werking van het invoerveld ondersteunt:

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

Laten we de inhoud van de array weergeven als een lijst:

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

Laten we nu een invoerveld en een knop maken, waarbij bij het klikken op de knop de tekst van het invoerveld wordt toegevoegd aan het einde van de lijst als een nieuw item:

<template>
	<input v-model="newItem">
	<button @click="addItem">toevoegen</button>
</template>

Bij het klikken op de knop wordt de methode addItem aangeroepen, die de tekst uit het invoerveld zal nemen en deze zal toevoegen als een nieuw element aan de array, wat zal leiden tot een reactieve wijziging van de lijst:

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

Gegeven een array. Gegeven een invoerveld. Gegeven een knop. Geef de elementen van deze array weer als een lijst ul. Zorg ervoor dat bij het klikken op de knop de tekst uit het invoerveld aan het einde van de lijst wordt toegevoegd.

Wijzig de vorige opdracht zodat het nieuwe item aan het begin van de lijst wordt toegevoegd.