Форма за добавяне на елементи в масив във Vue

Нека реактивно да добавяме текст от input в края на масива. Да пристъпим към реализацията. Нека имаме даден масив:

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

Добавяме свойство newItem, което поддържа работа на input:

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

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

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

Нека сега направим input и бутон, при натискането на който текстът от input ще се добави в края на списъка като нов елемент:

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

При натискане на бутона ще се извика метод addItem, който ще вземе текста от input и ще го добави като нов елемент в масива, което ще доведе до реактивна промяна на списъка:

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

Даден е масив. Даден е input. Даден е бутон. Изведете елементите на този масив под формата на списък ul. Направете така, че при натискане на бутона в края на списъка да се добави текстът от input.

Модифицирайте предходната задача така, че новият елемент да се добавя в началото на списъка.