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 рўйхат шаклида чиқаринг. Тугма босилганда рўйхатнинг охирига инпут матни қўшиладиган қилиб тайёрланг.

Олдинги вазифани янги пункт рўйхатнинг бошланғичига қўшиладиган қилиб ўзгартиринг.