Reaktivitet av arrays i Vue
Reaktivitet utløses selv ved endringer
i arrays som vises gjennom v-for.
La oss for eksempel gjøre det slik at
ved et klikk på en knapp blir et nytt element
reaktivt lagt til i arrayet og endringene
umiddelbart skjer også på skjermen.
La oss implementere det som er beskrevet. La oss si at vi har et array:
data() {
return {
arr: ['a', 'b', 'c'],
}
}
La oss vise elementene i dette arrayet i en løkke:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
La oss lage en knapp som, når den klikkes på, legger til et nytt element i arrayet:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">add</button>
</template>
La oss implementere den tilsvarende metoden:
methods: {
add: function() {
this.arr.push('xxx');
}
}
En knapp er gitt. Et array er gitt. Vis elementene
i dette arrayet som en liste ul. Gjør det
slik at ved et klikk på knappen legges det til
et nytt punkt på slutten av denne listen.
En knapp er gitt. Et array er gitt. Vis elementene
i dette arrayet som en liste ul. Gjør det
slik at hver gang knappen klikkes på
slettes det første punktet i listen.
En knapp er gitt. Et array er gitt. Vis elementene
i dette arrayet som en liste ul. Gjør det
slik at hver gang knappen klikkes på
slettes det siste punktet i listen.
En knapp er gitt. Et array er gitt. Vis elementene
i dette arrayet som en liste ul. Gjør det
slik at hver gang knappen klikkes på
slettes det nest siste punktet i listen.
En knapp er gitt. Et array er gitt. Vis elementene
i dette arrayet som en liste ul. Gjør det
slik at ved et klikk på knappen
sorteres punktene i listen.
En knapp er gitt. Et array er gitt. Vis elementene
i dette arrayet som en liste ul. Gjør det
slik at ved et klikk på knappen
ordnes punktene i listen
i omvendt rekkefølge.
Unntak
På grunn av begrensninger i JavaScript, er Vue ikke i stand til å
legge merke til følgende endringer i et array: direkte
tildeling av et element ved indeks: items[nøkkel]
= nyVerdi og eksplisitt endring av lengden
på arrayet, for eksempel: items.length = nyLengde.
