Uwepo wa Mitindo ya Arrays katika Vue

Uwepo wa mitindo unafanya kazi hata wakati wa mabadiliko katika arrays, yanayotolewa kupitia v-for. Wacha kwa mfano tufanye ili kwa kubofya kitufe kwenye array yenye mitindo kipengele kipya kiongezwe na mabadiliko yatokee mara moja kwenye skrini.

Wacha tutekeleze yaliyoelezewa. Acha tuwe na array:

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

Wacha tuonyeshe vipengele vya array hii kwenye mzunguko:

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

Wacha tufanye kitufe, ambacho kwa kubofya kipengele kipya kitaongezwa kwenye array:

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

Wacha tutekeleze mbinu inayofanana:

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

Kuna kitufe. Kuna array. Onyesha vipengele vya array hii kwa kutumia ul. Fanya hivi ili kwa kubofya kitufe kwenye mwisho wa orodha hii kipengele kipya kiongezwe.

Kuna kitufe. Kuna array. Onyesha vipengele vya array hii kwa kutumia ul. Fanya hivi ili kila wakati kwa kubofya kitufe kipengele cha kwanza kifutwe kutoka kwenye orodha.

Kuna kitufe. Kuna array. Onyesha vipengele vya array hii kwa kutumia ul. Fanya hivi ili kila wakati kwa kubofya kitufe kipengele cha mwisho kifutwe kutoka kwenye orodha.

Kuna kitufe. Kuna array. Onyesha vipengele vya array hii kwa kutumia ul. Fanya hivi ili kila wakati kwa kubofya kitufe kipengele cha mwisho wa pili kifutwe kutoka kwenye orodha.

Kuna kitufe. Kuna array. Onyesha vipengele vya array hii kwa kutumia ul. Fanya hivi ili kwa kubofya kitufe vipengele vya orodha vitatupwe kwa mpangilio.

Kuna kitufe. Kuna array. Onyesha vipengele vya array hii kwa kutumia ul. Fanya hivi ili kwa kubofya kitufe vipengele vya orodha viwe kwa mpangilio wa nyuma.

Vizuizi

Kwa sababu ya vizuizi vya JavaScript, Vue haiwezi kugundua mabadiliko yafuatayo kwenye array: kuweka moja kwa moja kipengele kwa kutumia index: items[ufunguo] = thamaniMpya na mabadiliko ya wazi ya urefu wa array, kwa mfano: items.length = urefuMpya.