Obrazec za dodajanje elementov polja v Vue

Reaktivno dodajmo besedilo iz vnosa na konec polja. Začnimo z implementacijo. Naj imamo podano polje:

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

Dodajmo lastnost newItem, ki podpira delovanje vnosa:

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

Izpišimo vsebino polja kot seznam:

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

Naredimo zdaj vnosno polje in gumb, ob kliku na katerega se besedilo iz vnosa doda na konec seznama kot nov element:

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

Ob kliku na gumb se bo poklicala metoda addItem, ki bo vzela besedilo iz vnosa in ga dodala kot nov element v polje, kar bo povzročilo reaktivno spremembo seznama:

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

Podano je polje. Podano je vnosno polje. Podan je gumb. Izpišite elemente tega polja kot seznam ul. Naredite tako, da se ob kliku na gumb na konec seznama doda besedilo iz vnosa.

Spremenite prejšnjo nalogo tako, da se nov element doda na začetek seznama.