Forma masyvo elementų pridėjimui Vue

Leiskite mums reaktyviai pridėti tekstą iš įvesties lauko į masyvo pabaigą. Pradėkime įgyvendinti. Tarkime, kad mums duotas masyvas:

data() {
	return {
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

Pridėkime savybę newItem, kuri palaiko įvesties lauko veikimą:

data() {
	return {
		newItem: '',
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

Atvaizduokime masyvo turinį kaip sąrašą:

<template>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
		</li>
	</ul>
</template>

Dabar sukurkime įvesties lauką ir mygtuką, kurį paspaudus įvesties lauko tekstas bus pridėtas į sąrašo pabaigą kaip naujas punktas:

<template>
	<input v-model="newItem">
	<button @click="addItem">add</button>
</template>

Paspaudus mygtuką bus iškviestas metodas addItem, kuris paims tekstą iš įvesties lauko ir pridės jį kaip naują elementą į masyvą, o tai sukels reaktyvų sąrašo pakeitimą:

methods: {
	addItem: function() {
		this.items.push(this.newItem);
	}
}

Duotas masyvas. Duotas įvesties laukas. Duotas mygtukas. Atvaizduokite šio masyvo elementus kaip ul sąrašą. Padarykite taip, kad paspaudus mygtuką į sąrašo pabaigą būtų pridėtas tekstas iš įvesties lauko.

Modifikuokite ankstesnę užduotį taip, kad naujas punktas būtų pridedamas į sąrašo pradžią.