Massiivide reaktiivsus Vue'is

Reaktiivsus töötab isegi massiivide muutmistel, mida kuvatakse läbi v-for. Teeme näiteks nii, et nupu vajutamisel lisatakse massiivi reaktiivselt uus element ja muutused toimuvad kohe ka ekraanil.

Rakendame kirjeldatu. Olgu meil massiiv:

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

Kuvame selle massiivi elemendid tsüklis:

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

Teeme nupu, mille vajutamisel massiivi lisatakse uus element:

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

Rakendame vastava meetodi:

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

Задание 1

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et nupu vajutamisel lisatakse selle loendi lõppu uus punkt.

Задание 2

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et iga kord nupu vajutamisel loendist eemaldatakse esimene punkt.

Задание 3

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et iga kord nupu vajutamisel loendist eemaldatakse viimane punkt.

Задание 4

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et iga kord nupu vajutamisel loendist eemaldatakse eelviimane punkt.

Задание 5

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et nupu vajutamisel loendi punktid sorteeritakse.

Задание 6

Antud nupp. Antud massiiv. Kuva massiivi elemendid loendina ul. Tee nii, et nupu vajutamisel loendi punktid paigutatakse vastupidises järjekorras.

Erandid

JavaScripti piiratuste tõttu ei suuda Vue märgata massiivis järgmisi muutusi: otsest elemendi määramist indeksi järgi: items[võti] = uusVäärtus ja massiivi pikkuse selget muutmist, näiteks: items.length = uusPikkus.