Vorm vir die byvoeging van elemente tot 'n array in Vue

Kom ons reaktief teks uit die insetveld aan die einde van die array byvoeg. Kom ons begin met die implementering. Gestel ons het 'n array:

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

Kom ons voeg die eienskap newItem by, wat die werk van die insetveld ondersteun:

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

Kom ons vertoon die inhoud van die array as 'n lys:

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

Kom ons maak nou 'n insetveld en 'n knoppie, sodat met 'n klik op die knoppie die teks uit die insetveld aan die einde van die lys as 'n nuwe item bygevoeg word:

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

Met 'n klik op die knoppie sal die metode addItem opgeroep word, wat die teks uit die insetveld sal neem en dit as 'n nuwe element tot die array sal byvoeg, wat tot 'n reaktiewe verandering van die lys sal lei:

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

'n Array word gegee. 'n Insetveld word gegee. 'n Knoppie word gegee. Vertoon die elemente van hierdie array as 'n lys ul. Sorg dat met 'n klik op die knoppie die teks uit die insetveld aan die einde van die lys bygevoeg word.

Wysig die vorige taak sodat die nuwe item aan die begin van die lys bygevoeg word.