Vue-də massivlərin reaktivliyi

Reaktivlik hətta v-for ilə çıxarılan massivlərdə dəyişikliklər edildikdə də işləyir. Gəlin nümunə üçün elə edək ki, düyməni kliklədikdə massivə reaktiv şəkildə yeni element əlavə olunsun və dəyişikliklər ani olaraq ekranda da görünsün.

Gəlin təsvir olunanı həyata keçirək. Fərz edək ki, bizim massivimiz var:

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

Gəlin bu massivin elementlərini sikl içərisində çıxaraq:

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

Gəlin kliklədikdə massivə yeni element əlavə edən bir düymə edək:

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

Gəlin uyğun metodu həyata keçirək:

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

Bir düymə verilib. Bir massiv verilib. Bu massivin elementlərini ul siyahısı şəklində çıxarın. Elə edin ki, düyməni kliklədikdə bu siyahının sonuna yeni maddə əlavə olunsun.

Bir düymə verilib. Bir massiv verilib. Bu massivin elementlərini ul siyahısı şəklində çıxarın. Elə edin ki, hər dəfə düyməni kliklədikdə siyahının ilk maddəsi silinsin.

Bir düymə verilib. Bir massiv verilib. Bu massivin elementlərini ul siyahısı şəklində çıxarın. Elə edin ki, hər dəfə düyməni kliklədikdə siyahının sonuncu maddəsi silinsin.

Bir düymə verilib. Bir massiv verilib. Bu massivin elementlərini ul siyahısı şəklində çıxarın. Elə edin ki, hər dəfə düyməni kliklədikdə siyahının sondan əvvəlki maddəsi silinsin.

Bir düymə verilib. Bir massiv verilib. Bu massivin elementlərini ul siyahısı şəklində çıxarın. Elə edin ki, düyməni kliklədikdə siyahının maddələri çeşidlənmiş vəziyyətə gəlsin.

Bir düymə verilib. Bir massiv verilib. Bu massivin elementlərini ul siyahısı şəklində çıxarın. Elə edin ki, düyməni kliklədikdə siyahının maddələri tərs qaydada düzülsün.

İstisnalar

JavaScript-in məhdudiyyətləri səbəbindən, Vue massivdə aşağıdakı dəyişiklikləri aşkarlaya bilmir: bir elementə indeksə görə birbaşa mənimsətmə: items[açar] = yeniDeyer və massivin uzunluğunun aşkar şəkildə dəyişdirilməsi, məsələn: items.length = yeniUzunluq.