Рэактыўнасць масіваў у 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 = новаяДаўжыня.