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