Reaktywność tablic w Vue

Reaktywność działa nawet przy zmianach tablic, wyświetlanych za pomocą v-for. Zróbmy dla przykładu tak, aby po kliknięciu przycisku do tablicy reaktywnie dodawany był nowy element i zmiany następowały natychmiast również na ekranie.

Zaimplementujmy opisane. Załóżmy, że mamy tablicę:

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

Wyświetlmy elementy tej tablicy w pętli:

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

Zróbmy przycisk, po kliknięciu którego do tablicy będzie dodawany nowy element:

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

Zaimplementujmy odpowiednią metodę:

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

Задание 1

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby po kliknięciu przycisku na koniec tej listy dodał się nowy punkt.

Задание 2

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby za każdym razem po kliknięciu przycisku z listy usuwał się pierwszy punkt.

Задание 3

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby za każdym razem po kliknięciu przycisku z listy usuwał się ostatni punkt.

Задание 4

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby za każdym razem po kliknięciu przycisku z listy usuwał się przedostatni punkt.

Задание 5

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby po kliknięciu przycisku punkty listy posortowały się.

Задание 6

Dany jest przycisk. Dana jest tablica. Wyświetl elementy tej tablicy w postaci listy ul. Zrób tak, aby po kliknięciu przycisku punkty listy ustawiły się w odwrotnej kolejności.

Wyjątki

Z powodu ograniczeń JavaScript, Vue nie jest w stanie wykryć następujących zmian w tablicy: bezpośredniego ustawienia elementu po indeksie: items[klucz] = nowaWartość oraz jawnej zmiany długości tablicy, na przykład: items.length = nowaDługość.