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">დამატება</button>
</template>

ღილაკის დაჭერისას გამოიძახება მეთოდი addItem, რომელიც აიღებს ტექსტს ინპუთიდან და დაუმატებს მას, როგორც ახალ ელემენტს მასივს, რაც გამოიწვევს სიის რეაქტიულ ცვლილებას:

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

მოცემულია მასივი. მოცემულია ინპუთი. მოცემულია ღილაკი. გამოიტანეთ ამ მასივის ელემენტები სიის ul სახით. გახადეთ ისე, რომ ღილაკზე დაჭერისას სიის ბოლოს დაემატოს ტექსტი ინპუთიდან.

მოდიფიცირება წინა ამოცანა ისე, რომ ახალი პუნქტი დაემატოს სიის დასაწყისში.