Masīvu reaktivitāte Vue

Reaktivitāte darbojas pat ar masīvu izmaiņām, kas attēloti ar v-for. Kā piemēru, izveidosim tā, lai ar pogas nospiešanu masīvā reaktīvi tiktu pievienots jauns elements un izmaiņas nekavējoties parādītos arī ekrānā.

Realizēsim aprakstīto. Pieņemsim, ka mums ir masīvs:

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

Attēlosim šī masīva elementus ciklā:

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

Izveidosim pogu, kuras nospiešanas rezultātā masīvam tiks pievienots jauns elements:

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

Realizēsim atbilstošo metodi:

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

Dota poga. Dots masīvs. Attēlojiet šī masīva elementus saraksta ul veidā. Izveidojiet tā, lai ar pogas nospiešanu šī saraksta beigās tiktu pievienots jauns punkts.

Dota poga. Dots masīvs. Attēlojiet šī masīva elementus saraksta ul veidā. Izveidojiet tā, lai katru reizi, nospiežot pogu, sarakstā tiktu izdzēsts pirmais punkts.

Dota poga. Dots masīvs. Attēlojiet šī masīva elementus saraksta ul veidā. Izveidojiet tā, lai katru reizi, nospiežot pogu, sarakstā tiktu izdzēsts pēdējais punkts.

Dota poga. Dots masīvs. Attēlojiet šī masīva elementus saraksta ul veidā. Izveidojiet tā, lai katru reizi, nospiežot pogu, sarakstā tiktu izdzēsts priekšpēdējais punkts.

Dota poga. Dots masīvs. Attēlojiet šī masīva elementus saraksta ul veidā. Izveidojiet tā, lai ar pogas nospiešanu saraksta punkti tiktu sakārtoti.

Dota poga. Dots masīvs. Attēlojiet šī masīva elementus saraksta ul veidā. Izveidojiet tā, lai ar pogas nospiešanu saraksta punkti tiktu sakārtoti apgrieztā secībā.

Izņēmumi

JavaScript ierobežojumu dēļ Vue nespēj noteikt šādas masīva izmaiņas: tiešu elementa iestatīšanu pēc indeksa: items[atslēga] = jaunāVērtība un skaidru masīva garuma izmaiņu, piemēram: items.length = jaunaisGarums.