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:
data() {
return {
arr: ['a', 'b', 'c'],
}
}
Lad os vise elementerne i dette array i en løkke:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
Lav en knap, hvorved der tilføjes et nyt element til arrayet:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">add</button>
</template>
Implementer den tilsvarende metode:
methods: {
add: function() {
this.arr.push('xxx');
}
}
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.
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.
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.
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.
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.
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.
