Reactivitatea array-urilor în Vue

Reactivitatea funcționează chiar și la modificările array-urilor afișate prin v-for. Să facem de exemplu astfel încât la click pe buton în array să fie adăugat reactiv un element nou și modificările să se producă instantaneu și pe ecran.

Să implementăm cele descrise. Să presupunem că avem un array:

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

Să afișăm elementele acestui array într-un ciclu:

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

Să facem un buton, la click pe care în array să fie adăugat un element nou:

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

Să implementăm metoda corespunzătoare:

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

Задание 1

Este dat un buton. Este dat un array. Afișați elementele acestui array sub forma unei liste ul. Faceți astfel încât la click pe buton în sfârșitul acestei liste să fie adăugat un nou punct.

Задание 2

Este dat un buton. Este dat un array. Afișați elementele acestui array sub forma unei liste ul. Faceți astfel încât de fiecare dată la click pe buton din listă să fie șters primul punct.

Задание 3

Este dat un buton. Este dat un array. Afișați elementele acestui array sub forma unei liste ul. Faceți astfel încât de fiecare dată la click pe buton din listă să fie șters ultimul punct.

Задание 4

Este dat un buton. Este dat un array. Afișați elementele acestui array sub forma unei liste ul. Faceți astfel încât de fiecare dată la click pe buton din listă să fie șters penultimul punct.

Задание 5

Este dat un buton. Este dat un array. Afișați elementele acestui array sub forma unei liste ul. Faceți astfel încât la click pe buton punctele listei să fie sortate.

Задание 6

Este dat un buton. Este dat un array. Afișați elementele acestui array sub forma unei liste ul. Faceți astfel încât la click pe buton punctele listei să fie așezate în ordine inversă.

Excepții

Datorită limitărilor JavaScript, Vue nu este capabil să observe următoarele modificări în array: setarea directă a elementului după index: items[cheie] = valoareNouă și modificarea explicită a lungimii array-ului, de exemplu: items.length = lungimeNouă.