Formulár na pridávanie prvkov poľa vo Vue

Poďme reaktívne pridávať text z inputu na koniec poľa. Poďme na implementáciu. Nech máme dané pole:

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

Pridajme vlastnosť newItem, ktorá podporuje prácu inputu:

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

Vypíšme obsah poľa vo forme zoznamu:

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

Poďme teraz vytvoriť input a tlačidlo, po kliknutí na ktoré sa text z inputu pridá na koniec zoznamu ako nová položka:

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

Po kliknutí na tlačidlo sa zavolá metóda addItem, ktorá vezme text z inputu a pridá ho ako nový prvok do poľa, čo povedie k reaktívnej zmene zoznamu:

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

Dané pole. Daný input. Dané tlačidlo. Vypíšte prvky tohto poľa vo forme zoznamu ul. Urobte tak, aby po kliknutí na tlačidlo na koniec zoznamu pribudol text z inputu.

Upravte predchádzajúcu úlohu tak, aby nová položka pribudla na začiatok zoznamu.