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

Реактивность срабатывает даже при изменениях массивов, выводимых через `v-for`. Давайте для примера сделаем так, чтобы по нажатию на кнопку в массив реактивно добавлялся новый элемент и изменения мгновенно происхоили и на экране.

Давайте реализуем описанное. Пусть у нас в есть массив:

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

Выведем элементы этого массива в цикле:

`<template> <p v-for="elem in arr"> {{ elem }} </p> </template>`

Сделаем кнопку, по нажатию на которую в массив будет добавляться новый элемент:

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

Реализуем соответствующий метод:

`methods: { add: function() { this.arr.push('xxx'); } }`

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка `ul`. Сделайте так, чтобы по нажатию на кнопку в конец этого списка добавился новый пункт.

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка `ul`. Сделайте так, чтобы каждый раз по нажатию на кнопку списка удалялся первый пункт.

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка `ul`. Сделайте так, чтобы каждый раз по нажатию на кнопку списка удалялся последний пункт.

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка `ul`. Сделайте так, чтобы каждый раз по нажатию на кнопку списка удалялся предпоследний пункт.

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка `ul`. Сделайте так, чтобы по нажатию на кнопку пункты списка отсортировались.

Дана кнопка. Дан массив. Выведите элементы этого массива в виде списка `ul`. Сделайте так, чтобы по нажатию на кнопку пункты списка выстроились в обратном порядке.

## Исключения

Из-за ограничений JavaScript, Vue не способен заметить следующие изменения в массиве: прямую установку элемента по индексу: `items[ключ] = новоеЗначение` и явное изменение длины массива, например: `items.length = новаяДлина`.

← →
↑