Form för att lägga till element i array i Vue

Låt oss reaktivt lägga till text från input i slutet av arrayen. Låt oss börja med implementationen. Låt oss anta att vi har en given array:

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

Låt oss lägga till egenskapen newItem, som stöder input-fältets funktionalitet:

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

Låt oss visa innehållet i arrayen i form av en lista:

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

Låt oss nu skapa ett input-fält och en knapp, vid klick på vilken texten från input-fältet läggs till i slutet av listan som en ny punkt:

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

Vid klick på knappen kommer metoden addItem att anropas, som kommer att ta texten från input-fältet och lägga till den som ett nytt element i arrayen, vilket leder till en reaktiv förändring av listan:

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

En array är given. Ett input-fält är givet. En knapp är given. Visa elementen i denna array som en lista ul. Gör så att vid klick på knappen läggs texten från input-fältet till i slutet av listan.

Modifiera den föregående uppgiften så att den nya punkten läggs till i början av listan.