Taulukoiden reaktivisuus Vuessa

Reaktivisuus laukeaa jopa taulukoissa tapahtuvissa muutoksissa, joita näytetään v-for:llä. Tehdään esimerkkinä niin, että painiketta painamalla taulukkoon reaktiivisesti lisätään uusi elementti ja muutokset tapahtuvat välittömästi myös näytöllä.

Toteutetaan kuvattu. Olkoon meillä taulukko:

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

Näytetään tämän taulukon elementit loopissa:

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

Tehdään painike, jota painamalla taulukkoon lisätään uusi elementti:

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

Toteutetaan vastaava metodi:

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

Задание 1

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että painiketta painamalla tämän listan loppuun lisätään uusi kohta.

Задание 2

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että joka kerta painiketta painettaessa listasta poistetaan ensimmäinen kohta.

Задание 3

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että joka kerta painiketta painettaessa listasta poistetaan viimeinen kohta.

Задание 4

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että joka kerta painiketta painettaessa listasta poistetaan toiseksi viimeinen kohta.

Задание 5

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että painiketta painamalla listan kohdat lajitellaan.

Задание 6

Annettu painike. Annettu taulukko. Näytä taulukon elementit listana ul. Tee niin, että painiketta painamalla listan kohdat asetetaan käänteiseen järjestykseen.

Poikkeukset

JavaScriptin rajoitusten vuoksi Vue ei pysty havaitsemaan seuraavia muutoksia taulukossa: elementin suoraa asettamista indeksin perusteella: items[avain] = uusiArvo ja taulukon pituuden eksplisiittistä muutosta, esimerkiksi: items.length = uusiPituus.