Рэактыўнасць масіваў у 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 = новаяДаўжыня.