Vue-da massiv elementlarini qo'shish uchun forma

Keling, input matnini massiv oxiriga reaktiv ravishda qo'shamiz. Amalga oshirishni boshlaymiz. Bizga massiv berilgan bo'lsin:

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

newItem xususiyatini qo'shamiz:

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

Massiv tarkibini ro'yxat shaklida chiqaramiz:

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

Keling, endi input va tugma yarataylik, unga bosganda input matni ro'yxat oxiriga yangi element sifatida qo'shilsin:

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

Tugma bosilganda addItem metodi chaqiriladi, u input matnini oladi va uni massivga yangi element sifatida qo'shadi, bu ro'yxatning reaktiv o'zgarishiga olib keladi:

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

Massiv berilgan. Input berilgan. Tugma berilgan. Ushbu massiv elementlarini ul ro'yxati shaklida chiqaring. Tugma bosilganda ro'yxat oxiriga input matni qo'shiladigan qiling.

Oldingi vazifani yangi element ro'yxat boshiga qo'shiladigan qilib o'zgartiring.