Forma masīva elementu pievienošanai Vue

Reaktīvi pievienosim tekstu no ievades lauka masīva beigās. Sāksim realizāciju. Pieņemsim, ka mums ir dots masīvs:

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

Pievienosim īpašību newItem, kas atbalsta ievades lauka darbību:

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

Parādīsim masīva saturu saraksta veidā:

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

Tagad izveidosim ievades lauku un pogu, ar kuras nospiešanu teksts no ievades lauka tiks pievienots saraksta beigās kā jauns punkts:

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

Nospiežot pogu, tiks izsaukta metode addItem, kas paņems tekstu no ievades lauka un pievienos to kā jaunu elementu masīvam, kas izraisīs reaktīvu saraksta izmaiņu:

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

Dots masīvs. Dots ievades lauks. Dota poga. Parādiet šī masīva elementus saraksta veidā ul. Izdariet tā, lai, nospiežot pogu, saraksta beigās tiktu pievienots teksts no ievades lauka.

Modificējiet iepriekšējo uzdevumu tā, lai jauns punkts tiktu pievienots saraksta sākumā.