Форма за додавање елемената низа у 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">додај</button>
</template>

При клику на дугме биће позвана метода addItem, која ће узети текст из уносног поља и додати га као нови елемент у низ, што ће довести до реактивне промене списка:

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

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

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