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 = նորԵրկարություն։