Reaktiviteti i Vargjeve në Vue

Reaktiviteti aktivizohet edhe me ndryshimet në vargje, të dalë përmes v-for. Le të bëjmë për shembull kështu, që me klikim në buton në varg reaktivisht të shtohet një element i ri dhe ndryshimet të ndodhin menjëherë edhe në ekran.

Le të implementojmë atë që u përshkrua. Le të themi se kemi një varg:

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

Le të dalim elementët e këtij vargu në një cikël:

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

Le të bëjmë një buton, me klikim në të cilin në varg do të shtohet një element i ri:

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

Le të implementojmë metodën përkatëse:

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

Задание 1

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që me klikim në buton në fund të kësaj liste të shtohet një pikë i ri.

Задание 2

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që çdo herë me klikim në buton të listës të fshihet pika i pari.

Задание 3

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që çdo herë me klikim në buton të listës të fshihet pika i fundit.

Задание 4

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që çdo herë me klikim në buton të listës të fshihet pika i parafundit.

Задание 5

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që me klikim në buton pikat e listës të renditen.

Задание 6

Jepet një buton. Jepet një varg. Dalni elementët e këtij vargu në formën e një liste ul. Bëni kështu që me klikim në buton pikat e listës të rreshtohen në rend të kundërt.

Përjashtimet

Për shkak të kufizimeve të JavaScript, Vue nuk është në gjendje të vërejë ndryshimet e mëposhtme në varg: caktimin e drejtpërdrejtë të elementit sipas indeksit: items[çelësi] = vlerë e Re dhe ndryshimin e qartë të gjatësisë së vargut, për shembull: items.length = gjatësi e Re.