Реактивност на низи во 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 = новаДолжина.