Form til tilføjelse af elementer til et array i Vue

Lad os reaktivt tilføje tekst fra inputfeltet til slutningen af arrayet. Lad os gå i gang med implementeringen. Lad os antage, at vi har et givet array:

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

Lad os tilføje egenskaben newItem, der understøtter inputfeltets funktion:

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

Lad os vise indholdet af arrayet som en liste:

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

Lad os nu lave et inputfelt og en knap, hvor ved klik på knappen tilføjes inputfeltets tekst til slutningen af listen som et nyt punktum:

<template>
	<input v-model="newItem">
	<button @click="addItem">tilføj</button>
</template>

Ved klik på knappen kaldes metoden addItem, som vil tage teksten fra inputfeltet og tilføje den som et nyt element til arrayet, hvilket vil føre til en reaktiv ændring af listen:

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

Givet et array. Givet et inputfelt. Givet en knap. Vis elementerne i dette array som en liste ul. Gør så, at ved klik på knappen bliver teksten fra inputfeltet tilføjet til slutningen af listen.

Modificer den forrige opgave, så det nye punktum tilføjes i starten af listen.