Vue-da massivlarning reaktivligi

Reaktivlik hatto v-for orqali chiqarilgan massivlarning o'zgarishlarida ham ishlaydi. Keling, misol uchun, tugma bosilganda massivga reaktiv ravishda yangi element qo'shilishi va o'zgarishlar darhol ekranda ham aks etishi uchun qilaylik.

Keling, tavsiflangan narsani amalga oshiramiz. Bizda quyidagi massiv bo'lsin:

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

Keling, ushbu massiv elementlarini siklda chiqaramiz:

App.vue<template>
  <p v-for="elem in arr">
    {{ elem }}
  </p>
</template>

Keling, bosilganda massivga yangi element qo'shiladigan tugma yarataylik:

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

Keling, mos keladigan metodni amalga oshiramiz:

App.vuemethods: {
  add: function() {
    this.arr.push('xxx');
  }
}

Задание 1

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda ushbu ro'yxat oxiriga yangi band qo'shiladigan qiling.

Задание 2

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda har safar ro'yxatning birinchi bandi o'chiriladigan qiling.

Задание 3

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda har safar ro'yxatning oxirgi bandi o'chiriladigan qiling.

Задание 4

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda har safar ro'yxatning oxirdan oldingi bandi o'chiriladigan qiling.

Задание 5

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda ro'yxat bandlari tartiblangan holatga keladigan qiling.

Задание 6

Tugma berilgan. Massiv berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda ro'yxat bandlari teskari tartibda joylashadigan qiling.

Istisnolar

JavaScript cheklovlari tufayli, Vue massivdagi quyidagi o'zgarishlarni sezolmaydi: indeks bo'yicha elementni to'g'ridan-to'g'ri o'rnatish: items[kalit] = yangiQiymat va massiv uzunligini aniq o'zgartirish, masalan: items.length = yangiUzunlik.