Vue-da massivlarning reaktivligi

Reaktivlik hatto v-for orqali chiqarilgan massivlarning o'zgarishlarida ham ishlaydi. Keling, misol uchun, tugma bosilganda massivga reaktiv ravishda yangi element qo'shilishi va o'zgarishlar darhol ekranda ham aks etishi uchun qilaylik.

Keling, tavsiflangan narsani amalga oshiramiz. Bizda quyidagi massiv bo'lsin:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

Keling, ushbu massiv elementlarini siklda chiqaramiz:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
</template>

Keling, bosilganda massivga yangi element qo'shiladigan tugma yarataylik:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
	<button @click="add">add</button>
</template>

Keling, mos keladigan metodni amalga oshiramiz:

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

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda ushbu ro'yxat oxiriga yangi band qo'shiladigan qiling.

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda har safar ro'yxatning birinchi bandi o'chiriladigan qiling.

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda har safar ro'yxatning oxirgi bandi o'chiriladigan qiling.

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda har safar ro'yxatning oxirdan oldingi bandi o'chiriladigan qiling.

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda ro'yxat bandlari tartiblangan holatga keladigan qiling.

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda ro'yxat bandlari teskari tartibda joylashadigan qiling.

Istisnolar

JavaScript cheklovlari tufayli, Vue massivdagi quyidagi o'zgarishlarni sezolmaydi: indeks bo'yicha elementni to'g'ridan-to'g'ri o'rnatish: items[kalit] = yangiQiymat va massiv uzunligini aniq o'zgartirish, masalan: items.length = yangiUzunlik.