Formulario para agregar elementos a un arreglo en Vue

Vamos a agregar reactivamente el texto del input al final del arreglo. Procedamos con la implementación. Supongamos que tenemos un arreglo:

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

Agreguemos la propiedad newItem, que soporte el trabajo del input:

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

Mostremos el contenido del arreglo como una lista:

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

Ahora hagamos un input y un botón, al presionar el cual el texto del input se agregará al final de la lista como un nuevo elemento:

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

Al presionar el botón se llamará al método addItem, que tomará el texto del input y lo agregará como un nuevo elemento al arreglo, lo que llevará a un cambio reactivo de la lista:

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

Dado un arreglo. Dado un input. Dado un botón. Muestre los elementos de este arreglo como una lista ul. Haga que al presionar el botón se agregue el texto del input al final de la lista.

Modifique la tarea anterior para que el nuevo elemento se agregue al principio de la lista.