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 = жаңыУзундук.