Reaktivitet af arrays i Vue

Reaktivitet udløses selv ved ændringer af arrays, der vises gennem v-for. Lad os for eksempel gøre det sådan, at ved at klikke på en knappe tilføjes et nyt element reaktivt til arrayet og ændringerne øjeblikkeligt sker også på skærmen.

Lad os implementere det beskrevne. Lad os sige, at vi har et array:

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

Lad os vise elementerne i dette array i en løkke:

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

Lav en knap, hvorved der tilføjes et nyt element til arrayet:

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

Implementer den tilsvarende metode:

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

Задание 1

Der gives en knap. Der gives et array. Vis elementerne i dette array som en liste ul. Gør det sådan, at ved at klikke på knappen tilføjes et nyt punktum til slutningen af denne liste.

Задание 2

Der gives en knap. Der gives et array. Vis elementerne i dette array som en liste ul. Gør det sådan, at hver gang knappen klikkes, fjernes den første punktum på listen.

Задание 3

Der gives en knap. Der gives et array. Vis elementerne i dette array som en liste ul. Gør det sådan, at hver gang knappen klikkes, fjernes den sidste punktum på listen.

Задание 4

Der gives en knap. Der gives et array. Vis elementerne i dette array som en liste ul. Gør det sådan, at hver gang knappen klikkes, fjernes den næstsidste punktum på listen.

Задание 5

Der gives en knap. Der gives et array. Vis elementerne i dette array som en liste ul. Gør det sådan, at ved at klikke på knappen sorteres listens punktum.

Задание 6

Der gives en knap. Der gives et array. Vis elementerne i dette array som en liste ul. Gør det sådan, at ved at klikke på knappen still listens punktum op i omvendt rækkefølge.

Undtagelser

På grund af begrænsninger i JavaScript, er Vue ikke i stand til at opdage følgende ændringer i et array: direkte tildeling af et element efter indeks: items[nøgle] = nyVærdi og eksplicit ændring af længden af arrayet, for eksempel: items.length = nyLængde.