Реактивност на масиви във Vue

Реактивността се задейства дори при промени в масиви, изведени чрез v-for. Нека за пример направим така, че при натискане на бутон в масива реактивно да се добавя нов елемент и промените мигновено да се появяват и на екрана.

Нека реализираме описаното. Да предположим, че имаме масив:

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

Нека изведем елементите на този масив в цикъл:

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

Нека направим бутон, при натискане на който в масива ще се добавя нов елемент:

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

Нека реализираме съответния метод:

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

Задание 1

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че при натискане на бутона в края на този списък да се добавя нов пункт.

Задание 2

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че всеки път при натискане на бутона от списъка да се премахва първият пункт.

Задание 3

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че всеки път при натискане на бутона от списъка да се премахва последният пункт.

Задание 4

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че всеки път при натискане на бутона от списъка да се премахва предпоследният пункт.

Задание 5

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че при натискане на бутона пунктовете в списъка да се сортират.

Задание 6

Даден е бутон. Даден е масив. Изведете елементите на този масив като списък ul. Направете така, че при натискане на бутона пунктовете в списъка да се подредят в обратен ред.

Изключения

Поради ограниченията на JavaScript, Vue не може да забележи следните промени в масива: директно задаване на елемент по индекс: items[ключ] = новаСтойност и явна промяна на дължината на масива, например: items.length = новаДължина.