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 = жаңыУзундук.