Massiivi elementide lisamise vorm Vue's

Lisame reageerivalt sisestuskasti teksti massiivi lõppu. Asume rakendamise juurde. Olgu meil antud massiiv:

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

Lisame omaduse newItem, mis toetab sisestuskasti tööd:

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

Kuvame massiivi sisu loendina:

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

Teeme nüüd sisestuskasti ja nupu, mille vajutamisel lisatakse sisestuskasti tekst loendi lõppu uue punktina:

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

Nupu vajutamisel kutsutakse välja meetod addItem, mis võtab teksti sisestuskastist ja lisab selle uue elemendina massiivi, mis põhjustab reageeriva muutuse loendis:

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

Antud massiiv. Antud sisestuskast. Antud nupp. Kuva selle massiivi elemendid loendina ul. Tee nii, et nupu vajutamisel lisatakse loendi lõppu tekst sisestuskastist.

Muutke eelmist ülesannet nii, et uus punkt lisatakse loendi algusesse.