Reaktivitet i arrayer i Vue
Reaktivitet utlöses även vid förändringar
i arrayer som visas genom v-for.
Låt oss som exempel göra så att
vid ett klick på en knapp läggs ett nytt element
reaktivt till i arrayen och förändringarna
omedelbart återspeglas på skärmen.
Låt oss implementera det som beskrivits. Låt oss anta att vi har en array:
javascriptdata() {
return {
arr: ['a', 'b', 'c'],
}
}
Låt oss visa elementen i denna array i en loop:
App.vue<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
Låt oss skapa en knapp, vid klick på vilken ett nytt element läggs till i arrayen:
App.vue<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">add</button>
</template>
Låt oss implementera motsvarande metod:
App.vuemethods: {
add: function() {
this.arr.push('xxx');
}
}
En knapp är given. En array är given. Visa elementen
i denna array som en lista ul. Gör
så att vid ett klick på knappen läggs ett nytt
punkt till i slutet av listan.
En knapp är given. En array är given. Visa elementen
i denna array som en lista ul. Gör
så att varje gång knappen klickas
tas den första punkten i listan bort.
En knapp är given. En array är given. Visa elementen
i denna array som en lista ul. Gör
så att varje gång knappen klickas
tas den sista punkten i listan bort.
En knapp är given. En array är given. Visa elementen
i denna array som en lista ul. Gör
så att varje gång knappen klickas
tas den näst sista punkten i listan bort.
En knapp är given. En array är given. Visa elementen
i denna array som en lista ul. Gör
så att vid ett klick på knappen
sorteras punkterna i listan.
En knapp är given. En array är given. Visa elementen
i denna array som en lista ul. Gör
så att vid ett klick på knappen
ordnas punkterna i listan
i omvänd ordning.
Undantag
På grund av begränsningar i JavaScript, kan Vue inte
upptäcka följande förändringar i en array: direkt
tilldelning av ett element via index: items[nyckel]
= nyttVärde och explicit förändring av arrayens
längd, till exempel: items.length = nyLängd.