Vue'de Dizilerin Tepkiselliği

Tepkisellik, v-for ile render edilen dizilerde değişiklik yapıldığında da tetiklenir. Örnek olarak, bir butona tıklandığında diziye yeni bir elemanın tepkisel olarak eklendiğini ve değişikliklerin anında ekranda da gerçekleştiğini yapalım.

Anlatılanı hayata geçirelim. Bir dizimiz olsun:

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

Bu dizinin elemanlarını bir döngü içinde render edelim:

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

Diziye yeni bir eleman ekleyen bir buton yapalım:

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

İlgili metodu hayata geçirelim:

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

Bir buton verilsin. Bir dizi verilsin. Bu dizinin elemanlarını bir ul listesi olarak render edin. Butona her tıklandığında bu listenin sonuna yeni bir maddenin eklenmesini sağlayın.

Bir buton verilsin. Bir dizi verilsin. Bu dizinin elemanlarını bir ul listesi olarak render edin. Butona her tıklandığında listenin ilk maddesinin silinmesini sağlayın.

Bir buton verilsin. Bir dizi verilsin. Bu dizinin elemanlarını bir ul listesi olarak render edin. Butona her tıklandığında listenin son maddesinin silinmesini sağlayın.

Bir buton verilsin. Bir dizi verilsin. Bu dizinin elemanlarını bir ul listesi olarak render edin. Butona her tıklandığında listenin sondan ikinci maddesinin silinmesini sağlayın.

Bir buton verilsin. Bir dizi verilsin. Bu dizinin elemanlarını bir ul listesi olarak render edin. Butona tıklandığında liste maddelerinin sıralanmasını sağlayın.

Bir buton verilsin. Bir dizi verilsin. Bu dizinin elemanlarını bir ul listesi olarak render edin. Butona tıklandığında liste maddelerinin ters sırada dizilmesini sağlayın.

İstisnalar

JavaScript'in kısıtlamaları nedeniyle, Vue dizideki aşağıdaki değişiklikleri algılayamaz: bir elemana indeksle doğrudan atama yapmak: items[anahtar] = yeniDeğer ve dizinin uzunluğunu açıkça değiştirmek, örneğin: items.length = yeniUzunluk.