Реактивност на масиви във Vue

Реактивността се задейства дори при промени в масиви, изведени чрез v-for. Нека за пример направим така, че при натискане на бутон в масива реактивно да се добавя нов елемент и промените мигновено да се появяват и на екрана.

Нека реализираме описаното. Да предположим, че имаме масив:

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

Нека изведем елементите на този масив в цикъл:

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

Нека направим бутон, при натискане на който в масива ще се добавя нов елемент:

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

Нека реализираме съответния метод:

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

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че при натискане на бутона в края на този списък да се добавя нов пункт.

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че всеки път при натискане на бутона от списъка да се премахва първият пункт.

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че всеки път при натискане на бутона от списъка да се премахва последният пункт.

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че всеки път при натискане на бутона от списъка да се премахва предпоследният пункт.

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че при натискане на бутона пунктовете в списъка да се сортират.

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че при натискане на бутона пунктовете в списъка да се подредят в обратен ред.

Изключения

Поради ограниченията на JavaScript, Vue не може да забележи следните промени в масива: директно задаване на елемент по индекс: items[ключ] = новаСтойност и явна промяна на дължината на масива, например: items.length = новаДължина.