Reaktivita polí ve Vue

Reaktivita funguje i při změnách poli, které jsou vypsány pomocí v-for. Pojďme si pro příklad zařídit, aby po kliknutí na tlačítko bylo do pole reaktivně přidán nový prvek a změny se okamžitě projevily i na obrazovce.

Pojďme popsané realizovat. Předpokládejme, že máme pole:

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

Vypišme prvky tohoto pole v cyklu:

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

Vytvořme tlačítko, po jehož stisknutí bude do pole přidán nový prvek:

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

Implementujme odpovídající metodu:

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

Задание 1

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby po kliknutí na tlačítko byl na konec tohoto seznamu přidán nový bod.

Задание 2

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby pokaždé po kliknutí na tlačítko se ze seznamu odstranil první bod.

Задание 3

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby pokaždé po kliknutí na tlačítko se ze seznamu odstranil poslední bod.

Задание 4

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby pokaždé po kliknutí na tlačítko se ze seznamu odstranil předposlední bod.

Задание 5

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby po kliknutí na tlačítko se body seznamu seřadily.

Задание 6

Je dáno tlačítko. Je dáno pole. Vypište prvky tohoto pole jako seznam ul. Zařiďte, aby po kliknutí na tlačítko se body seznamu uspořádaly v obráceném pořadí.

Výjimky

Kvůli omezením JavaScriptu Vue není schopen zaznamenat následující změny v poli: přímé nastavení prvku podle indexu: items[klíč] = nováHodnota a explicitní změnu délky pole, například: items.length = nováDélka.