Reaktivita polí vo Vue

Reaktivita funguje aj pri zmenách poli, ktoré sa vypisujú pomocou v-for. Pre príklad si urobme tak, aby po kliknutí na tlačidlo sa do poľa reaktívne pridal nový prvok a zmeny sa okamžite prejavili aj na obrazovke.

Realizujme popísané. Nech máme pole:

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

Vypíšme prvky tohto poľa v cykle:

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

Urobme tlačidlo, po kliknutí na ktoré sa do poľa pridá nový prvok:

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

Realizujme zodpovedajúcu metódu:

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

Задание 1

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby po kliknutí na tlačidlo na koniec tohto zoznamu pribudol nový bod.

Задание 2

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby zakaždým po kliknutí na tlačidlo sa zo zoznamu odstránil prvý bod.

Задание 3

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby zakaždým po kliknutí na tlačidlo sa zo zoznamu odstránil posledný bod.

Задание 4

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby zakaždým po kliknutí na tlačidlo sa zo zoznamu odstránil predposledný bod.

Задание 5

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby po kliknutí na tlačidlo sa body zoznamu zoradili.

Задание 6

Dané tlačidlo. Dané pole. Vypíšte prvky tohto poľa ako zoznam ul. Urobte tak, aby po kliknutí na tlačidlo sa body zoznamu usporiadali v opačnom poradí.

Výnimky

Kvôli obmedzeniam JavaScriptu, Vue nie je schopný zaznamenať nasledujúce zmeny v poli: priamu nastavenie prvku podľa indexu: items[kľúč] = nováHodnota a explicitnú zmenu dĺžky poľa, napríklad: items.length = nováDĺžka.