Lomake taulukon elementtien lisäämiseksi Vue:ssa

Lisätään reaktiivisesti teksti syöttökentästä taulukon loppuun. Aloitetaan toteutus. Oletetaan, että meillä on taulukko:

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

Lisätään ominaisuus newItem, joka tukee syöttökentän toimintaa:

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

Esitetään taulukon sisältö listana:

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

Tehdään nyt syöttökenttä ja painike, jonka painalluksella syöttökentän teksti lisätään listan loppuun uutena kohtana:

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

Painiketta painettaessa kutsutaan metodia addItem, joka ottaa tekstin syöttökentästä ja lisää sen uutena elementtinä taulukkoon, mikä johtaa listan reaktiiviseen muutokseen:

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

Annettu taulukko. Annettu syöttökenttä. Annettu painike. Esitä tämän taulukon elementit listana ul. Tee niin, että painiketta painettaessa listan loppuun lisätään syöttökentän teksti.

Muokkaa edellistä tehtävää niin, että uusi kohde lisätään listan alkuun.