Forma për shtimin e elementeve të grupit në Vue

Le të shtojmë në mënyrë reaktive tekstin nga inputi në fund të grupit. Le të fillojmë zbatimin. Le të kemi një grup të dhënë:

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

Le të shtojmë vetinë newItem, që mbështet punën e inputit:

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

Le të shfaqim përmbajtjen e grupit në formën e një liste:

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

Tani le të bëjmë një input dhe një buton, me klikimin në të cilin teksti i inputit do të shtohet në fund të listës si një pikë e re:

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

Me klikimin në buton do të thirret metoda addItem, e cila do të marrë tekstin nga inputi dhe do ta shtojë atë si një element të ri në grup, gjë që do të çojë në një ndryshim reaktiv të listës:

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

Është dhënë një grup. Është dhënë një input. Është dhënë një buton. Shfaqni elementet e këtij grupi në formën e një liste ul. Bëni që me klikimin në buton në fund të listës të shtohet teksti nga inputi.

Modifikoni detyrën e mëparshme në mënyrë që pika e re të shtohet në fillim të listës.