Formularz dodawania elementów tablicy w Vue

Zareagujmy i dodajmy tekst z inputa na koniec tablicy. Przystąpmy do implementacji. Załóżmy, że mamy daną tablicę:

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

Dodajmy właściwość newItem, obsługującą input:

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

Wyświetlmy zawartość tablicy w postaci listy:

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

Zróbmy teraz input i przycisk, po naciśnięciu którego tekst z inputa zostanie dodany na koniec listy jako nowy element:

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

Po naciśnięciu przycisku wywołana zostanie metoda addItem, która weźmie tekst z inputa i doda go jako nowy element do tablicy, co spowoduje reaktywną zmianę listy:

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

Dana jest tablica. Dane jest pole input. Dane jest pole przycisku. Wyświetl elementy tej tablicy w postaci listy ul. Spraw, aby po naciśnięciu przycisku na koniec listy został dodany tekst z inputa.

Zmodyfikuj poprzednie zadanie tak, aby nowy element był dodawany na początek listy.