Reatividade de Arrays em Vue

A reatividade é acionada mesmo com mudanças em arrays exibidos via v-for. Vamos fazer, por exemplo, com que ao clicar em um botão, um novo elemento seja reativamente adicionado ao array e as mudanças ocorram instantaneamente na tela.

Vamos implementar o descrito. Suponha que temos um array:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

Vamos exibir os elementos deste array em um loop:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
</template>

Vamos fazer um botão que, ao ser clicado, adicionará um novo elemento ao array:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
	<button @click="add">adicionar</button>
</template>

Vamos implementar o método correspondente:

methods: {
	add: function() {
		this.arr.push('xxx');
	}
}

Dado um botão. Dado um array. Exiba os elementos deste array em forma de lista ul. Faça com que ao clicar no botão, um novo item seja adicionado ao final desta lista.

Dado um botão. Dado um array. Exiba os elementos deste array em forma de lista ul. Faça com que a cada clique no botão o primeiro item da lista seja removido.

Dado um botão. Dado um array. Exiba os elementos deste array em forma de lista ul. Faça com que a cada clique no botão o último item da lista seja removido.

Dado um botão. Dado um array. Exiba os elementos deste array em forma de lista ul. Faça com que a cada clique no botão o penúltimo item da lista seja removido.

Dado um botão. Dado um array. Exiba os elementos deste array em forma de lista ul. Faça com que ao clicar no botão os itens da lista sejam ordenados.

Dado um botão. Dado um array. Exiba os elementos deste array em forma de lista ul. Faça com que ao clicar no botão os itens da lista sejam dispostos em ordem inversa.

Exceções

Devido a limitações do JavaScript, o Vue não é capaz de detectar as seguintes mudanças em um array: a definição direta de um elemento por índice: items[chave] = novoValor e a alteração explícita do comprimento do array, por exemplo: items.length = novoComprimento.