Форма за додавање на елементи во низа во Vue

Ајде реактивно да додаваме текст од внесувачот на крајот од низата. Да започнеме со имплементацијата. Нека ни е дадена низа:

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

Да додадеме својство newItem, кое ќе го поддржува работењето на внесувачот:

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

Да го прикажеме содржината на низата во форма на список:

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

Сега ајде да направиме внесувач и копче, при кликнување на кое текстот од внесувачот ќе се додаде на крајот од списокот како нова ставка:

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

При кликнување на копчето ќе се повика методот addItem, кој ќе го земе текстот од внесувачот и ќе го додаде како нов елемент во низата, што ќе доведе до реактивна промена на списокот:

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

Дадена е низа. Даден е внесувач. Дадено е копче. Прикажете ги елементите на оваа низа како список ul. Направете така што при кликнување на копчето на крајот од списокот да се додаде текстот од внесувачот.

Модифицирајте ја претходната задача така што новата ставка ќе се додава на почетокот од списокот.