Reaktiviteti i Vargjeve në Vue

Reaktiviteti aktivizohet edhe me ndryshimet në vargje, të dalë përmes v-for. Le të bëjmë për shembull kështu, që me klikim në buton në varg reaktivisht të shtohet një element i ri dhe ndryshimet të ndodhin menjëherë edhe në ekran.

Le të implementojmë atë që u përshkrua. Le të themi se kemi një varg:

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

Le të dalim elementët e këtij vargu në një cikël:

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

Le të bëjmë një buton, me klikim në të cilin në varg do të shtohet një element i ri:

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

Le të implementojmë metodën përkatëse:

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

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që me klikim në buton në fund të kësaj liste të shtohet një pikë i ri.

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që çdo herë me klikim në buton të listës të fshihet pika i pari.

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që çdo herë me klikim në buton të listës të fshihet pika i fundit.

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që çdo herë me klikim në buton të listës të fshihet pika i parafundit.

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që me klikim në buton pikat e listës të renditen.

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që me klikim në buton pikat e listës të rreshtohen në rend të kundërt.

Përjashtimet

Për shkak të kufizimeve të JavaScript, Vue nuk është në gjendje të vërejë ndryshimet e mëposhtme në varg: caktimin e drejtpërdrejtë të elementit sipas indeksit: items[çelësi] = vlerë e Re dhe ndryshimin e qartë të gjatësisë së vargut, për shembull: items.length = gjatësi e Re.