Vue-da massiwlaryň reaksiýa edişliligi

Reaksiýa edişlilik v-for arkaly görkezilýän massiwlaryň üýtgemelerinde hem işleýär. Mysal üçin, düwmä basylanda reaksiýa ediji massa täze element goşulýan we üýtgeşiklikler ekranda derrew ýüze çykýan etdilik.

Görkezileni amala aşyryň. Bizde massiw bar bolsun:

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

Bu massiw elementlerini aýlawda görkezeliň:

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

Massa täze element goşulýan düwme düzeliň:

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

Degişli usuly amala aşyryň:

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

Düwme berlen. Massiw berlen. Bu massiw elementlerini ul sanawy görnüşinde görkeziň. Düwmä basylanda bu sanawyň ahyryna täze punt goşulýan etdiliň.

Düwme berlen. Massiw berlen. Bu massiw elementlerini ul sanawy görnüşinde görkeziň. Her gezek düwmä basylanda sanawyň birinji puntu aýrylan etdiliň.

Düwme berlen. Massiw berlen. Bu massiw elementlerini ul sanawy görnüşinde görkeziň. Her gezek düwmä basylanda sanawyň soňky puntu aýrylan etdiliň.

Düwme berlen. Massiw berlen. Bu massiw elementlerini ul sanawy görnüşinde görkeziň. Her gezek düwmä basylanda sanawyň soňky eýesi puntu aýrylan etdiliň.

Düwme berlen. Massiw berlen. Bu massiw elementlerini ul sanawy görnüşinde görkeziň. Düwmä basylanda sanawyň puntlary tertiplenen etdiliň.

Düwme berlen. Massiw berlen. Bu massiw elementlerini ul sanawy görnüşinde görkeziň. Düwmä basylanda sanawyň puntlary ters tertipde ýerleşen etdiliň.

Ýeňillemeler

JavaScript-iň çäklendirmeleri sebäpli, Vue massiwdäki aşakdaky üýtgeşiklikleri anyklaýar: elementi indeks boýunça göni bellämek: items[açar] = täzeMana we massiw uzynlygyny açyk üýtgetmek, mysal üçin: items.length = täzeUzynlyk.