Masyvų reaktyvumas Vue

Reaktyvumas veikia net ir pakeičiant masyvus, atvaizduojamus naudojant v-for. Pavyzdžiui, padarykime taip, kad paspaudus mygtuką į masyvą reaktyviai būtų pridedamas naujas elementas ir pakeitimai momentališkai atsispindėtų ir ekrane.

Įgyvendinkime aprašytą. Tarkime, kad turime masyvą:

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

Atvaizduokime šio masyvo elementus cikle:

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

Sukurkime mygtuką, kurį paspaudus į masyvą bus pridedamas naujas elementas:

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

Įgyvendinkime atitinkamą metodą:

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

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad paspaudus mygtuką į šio sąrašo pabaigą būtų pridėtas naujas punktas.

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad kaskart paspaudus mygtuką sąrašo būtų pašalinamas pirmasis punktas.

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad kaskart paspaudus mygtuką sąrašo būtų pašalinamas paskutinis punktas.

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad kaskart paspaudus mygtuką sąrašo būtų pašalinamas priešpaskutinis punktas.

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad paspaudus mygtuką sąrašo punktai būtų surūšiuoti.

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad paspaudus mygtuką sąrašo punktai išsidėliotų atvirkštine tvarka.

Išimtys

Dėl JavaScript apribojimų, Vue negali pastebėti šių masyvo pakeitimų: tiesioginį elemento nustatymą pagal indeksą: items[raktas] = naujaReikšmė ir aiškų masyvo ilgio pakeitimą, pavyzdžiui: items.length = naujasIlgis.