Tömbök reaktivitása Vue-ban

A reaktivitás akkor is működik, amikor a v-for-ral kiírt tömbök változnak. Példaként tegyük úgy, hogy egy gomb megnyomására a tömbhöz reaktívan hozzáadódjon egy új elem, és a változások azonnal megjelenjenek a képernyőn is.

Valósítsuk meg a leírtakat. Legyen egy tömbünk:

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

Jelenítsük meg a tömb elemeit ciklusban:

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

Készítsünk egy gombot, amelyre kattintva új elem kerül a tömbbe:

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

Valósítsuk meg a megfelelő metódust:

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

Задание 1

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb megnyomására a lista végére új elem kerüljön.

Задание 2

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb minden megnyomásakor a lista első eleme törlődjön.

Задание 3

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb minden megnyomásakor a lista utolsó eleme törlődjön.

Задание 4

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb minden megnyomásakor a lista utolsó előtti eleme törlődjön.

Задание 5

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb megnyomására a lista elemei rendeződjenek.

Задание 6

Adott egy gomb. Adott egy tömb. Jelenítsd meg a tömb elemeit egy ul listában. Úgy állítsd be, hogy a gomb megnyomására a lista elemei fordított sorrendbe kerüljenek.

Kivételek

A JavaScript korlátai miatt a Vue nem képes észlelni a tömb következő változásait: az elem közvetlen index alapján történő beállítását: items[kulcs] = újÉrték és a tömb hosszának explicit módosítását, például: items.length = újHossz.