Vue-də massivə element əlavə etmək üçün forma

Gəlin indeksdən mətnı massivin sonuna reaktiv şəkildə əlavə edək. Gəlin realizasiyaya başlayaq. Bizə bir massiv verilsin:

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

Gəlin newItem xüsusiyyətini əlavə edək, bu indeksin işini dəstəkləyəcək:

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

Gəlin massivin məzmununu siyahı şəklində çıxaraq:

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

Gəlin indi bir indeks və düymə edək, düyməyə basdıqda indeksin mətnı siyahının sonuna yeni bənd kimi əlavə olunacaq:

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

Düyməyə basdıqda addItem metodu çağırılacaq, buda indeksdən mətnı götürüb massivə yeni element kimi əlavə edəcək, bu da siyahının reaktiv dəyişməsinə səbəb olacaq:

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

Bir massiv verilib. Bir indeks verilib. Bir düymə verilib. Bu massivin elementlərini ul siyahısı şəklində çıxarın. Elə edin ki, düyməyə basdıqda siyahının sonuna indeksdən gələn mətn əlavə olunsun.

Əvvəlki məsələni elə dəyişin ki, yeni bənd siyahının əvvəlinə əlavə olunsun.