Реактивность низова у 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">додај</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 = новаДужина.