Реактивность низова у 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">додај</button>
</template>

Реализујмо одговарајућу методу:

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

Дато је дугме. Дат је низ. Прикажите елементе овог низа у виду списка ul. Направите тако да при клику на дугме на крај овог списка буде додата нова ставка.

Дато је дугме. Дат је низ. Прикажите елементе овог низа у виду списка ul. Направите тако да сваки пут при клику на дугме списка буде обрисана прва ставка.

Дато је дугме. Дат је низ. Прикажите елементе овог низа у виду списка ul. Направите тако да сваки пут при клику на дугме списка буде обрисана последња ставка.

Дато је дугме. Дат је низ. Прикажите елементе овог низа у виду списка ul. Направите тако да сваки пут при клику на дугме списка буде обрисана претпоследња ставка.

Дато је дугме. Дат је низ. Прикажите елементе овог низа у виду списка ul. Направите тако да при клику на дугме ставке списка буду сортиране.

Дато је дугме. Дат је низ. Прикажите елементе овог низа у виду списка ul. Направите тако да при клику на дугме ставке списка буду поређане обрнутим редом.

Изузеци

Због ограничења JavaScript-а, Vue није способан да примети следеће промене у низу: директно постављање елемента по индексу: items[кључ] = новаВредност и експлицитну промену дужине низа, на пример: items.length = новаДужина.