Modulo per aggiungere elementi a un array in Vue

Reattivamente aggiungiamo il testo dall'input alla fine dell'array. Iniziamo l'implementazione. Supponiamo di avere un array:

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

Aggiungiamo una proprietà newItem, che supporti il funzionamento dell'input:

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

Visualizziamo il contenuto dell'array come una lista:

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

Ora creiamo un input e un pulsante, alla cui pressione il testo dell'input verrà aggiunto alla fine della lista come nuovo elemento:

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

Alla pressione del pulsante verrà chiamato il metodo addItem, che prenderà il testo dall' input e lo aggiungerà come nuovo elemento all'array, causando una modifica reattiva della lista:

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

Dato un array. Dato un input. Dato un pulsante. Visualizza gli elementi di questo array come una lista ul. Fai in modo che alla pressione del pulsante alla fine della lista venga aggiunto il testo dall'input.

Modifica il problema precedente in modo che il nuovo elemento venga aggiunto all'inizio della lista.