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 = янгиУзунлик.