Массивке элементтер қосу үшін форма 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 тізімі түрінде шығарыңыз. Батырманы басқан кезде инпуттан алынған мәтін тізімнің соңына қосылатындай етіңіз.

Алдыңғы тапсырманы өзгертіңіз, сонда жаңа жол тізімнің басына қосылады.