Formular pentru adăugarea elementelor într-un array în Vue

Să adăugăm în mod reactiv textul din input la sfârșitul array-ului. Să începem implementarea. Să presupunem că avem un array dat:

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

Să adăugăm proprietatea newItem, care să susțină funcționalitatea input-ului:

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

Să afișăm conținutul array-ului sub formă de listă:

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

Acum să creăm un input și un buton, la apăsarea căruia textul din input va fi adăugat la sfârșitul listei ca un nou punct:

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

La apăsarea butonului va fi apelată metoda addItem, care va lua textul din input și îl va adăuga ca un nou element în array, ceea ce va duce la o modificare reactivă a listei:

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

Este dat un array. Este dat un input. Este dat un buton. Afișați elementele acestui array sub formă de listă ul. Faceți astfel încât la apăsarea butonului la sfârșitul listei să se adauge textul din input.

Modificați problema anterioară astfel încât noul punct să fie adăugat la începutul listei.