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:

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

Tampilkan elemen dari array ini dalam sebuah loop:

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

Buat sebuah tombol, yang ketika ditekan akan menambahkan elemen baru ke array:

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

Implementasikan metode yang sesuai:

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

Задание 1

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.

Задание 2

Diberikan sebuah tombol. Diberikan sebuah array. Tampilkan elemen array ini dalam bentuk daftar ul. Buatlah agar setiap kali tombol ditekan, item pertama daftar dihapus.

Задание 3

Diberikan sebuah tombol. Diberikan sebuah array. Tampilkan elemen array ini dalam bentuk daftar ul. Buatlah agar setiap kali tombol ditekan, item terakhir daftar dihapus.

Задание 4

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.

Задание 5

Diberikan sebuah tombol. Diberikan sebuah array. Tampilkan elemen array ini dalam bentuk daftar ul. Buatlah agar saat tombol ditekan, item daftar diurutkan.

Задание 6

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.