Reaktivitas Array di Vue
Reaktivitas tetap bekerja bahkan saat perubahan
array yang ditampilkan melalui v-for.
Mari kita buat contoh agar
saat tombol ditekan, elemen baru secara reaktif
ditambahkan ke array dan perubahan
langsung terjadi di layar.
Mari kita implementasikan yang telah dijelaskan. Misalkan kita memiliki array:
data() {
return {
arr: ['a', 'b', 'c'],
}
}
Tampilkan elemen dari array ini dalam sebuah loop:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
Buat sebuah tombol, yang ketika ditekan akan menambahkan elemen baru ke array:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">add</button>
</template>
Implementasikan metode yang sesuai:
methods: {
add: function() {
this.arr.push('xxx');
}
}
Diberikan sebuah tombol. Diberikan sebuah array. Tampilkan elemen
array ini dalam bentuk daftar ul. Buatlah
agar saat tombol ditekan, item baru ditambahkan
ke akhir daftar ini.
Diberikan sebuah tombol. Diberikan sebuah array. Tampilkan elemen
array ini dalam bentuk daftar ul. Buatlah
agar setiap kali tombol ditekan,
item pertama daftar dihapus.
Diberikan sebuah tombol. Diberikan sebuah array. Tampilkan elemen
array ini dalam bentuk daftar ul. Buatlah
agar setiap kali tombol ditekan,
item terakhir daftar dihapus.
Diberikan sebuah tombol. Diberikan sebuah array. Tampilkan elemen
array ini dalam bentuk daftar ul. Buatlah
agar setiap kali tombol ditekan,
item kedua dari akhir daftar dihapus.
Diberikan sebuah tombol. Diberikan sebuah array. Tampilkan elemen
array ini dalam bentuk daftar ul. Buatlah
agar saat tombol ditekan,
item daftar diurutkan.
Diberikan sebuah tombol. Diberikan sebuah array. Tampilkan elemen
array ini dalam bentuk daftar ul. Buatlah
agar saat tombol ditekan,
item daftar disusun
dalam urutan terbalik.
Pengecualian
Karena keterbatasan JavaScript, Vue tidak dapat
mendeteksi perubahan berikut dalam array: penetapan
elemen langsung berdasarkan indeks: items[kunci]
= nilaiBaru dan perubahan panjang array
secara eksplisit, contohnya: items.length = panjangBaru.
