Form баро илова кардани элементҳои массив дар 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 бароред. Чунон созед, ки бо фишурдани тугма ба охири рӯйхат матни инпут илова шавад.

Вазифаи қаблиро тағйир диҳед, то ки унсури нав ба сари рӯйхат илова шавад.