Skjema for å legge til elementer i en array i Vue

La oss reaktivt legge til tekst fra inputfeltet på slutten av arrayen. La oss komme i gang med implementeringen. Anta at vi har gitt en array:

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

La oss legge til egenskapen newItem, som støtter inputfeltets funksjonalitet:

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

La oss vise innholdet i arrayen som en liste:

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

La oss nå lage et inputfelt og en knapp, der teksten fra inputfeltet legges til på slutten av listen som et nytt punkt når knappen klikkes:

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

Når knappen klikkes, vil metoden addItem bli kalt, som vil ta teksten fra inputfeltet og legge den til som et nytt element i arrayen, noe som vil føre til en reaktiv endring av listen:

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

Det er gitt en array. Det er gitt et inputfelt. Det er gitt en knapp. Vis elementene i denne arrayen som en liste ul. Gjør slik at når knappen klikkes blir teksten fra inputfeltet lagt til på slutten av listen.

Endre den forrige oppgaven slik at det nye punktet legges til i begynnelsen av listen.