Formulário para Adicionar Elementos a um Array em Vue

Vamos adicionar reativamente o texto do input ao final do array. Vamos começar a implementação. Suponha que temos um array:

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

Vamos adicionar a propriedade newItem, para suportar o funcionamento do input:

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

Vamos exibir o conteúdo do array como uma lista:

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

Agora vamos criar um input e um botão, no qual ao clicar, o texto do input será adicionado ao final da lista como um novo item:

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

Ao clicar no botão, o método addItem será chamado, ele irá pegar o texto do input e adicioná-lo como um novo elemento no array, o que levará a uma mudança reativa na lista:

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

Dado um array. Dado um input. Dado um botão. Exiba os elementos deste array em forma de lista ul. Faça com que ao clicar no botão o texto do input seja adicionado ao final da lista.

Modifique a tarefa anterior para que o novo item seja adicionado ao início da lista.