Реактивность массивов в 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 = новаяДлина.