Formular zum Hinzufügen von Elementen zu einem Array in Vue

Lassen Sie uns Text aus der Eingabe reaktiv am Ende des Arrays hinzufügen. Beginnen wir mit der Implementierung. Nehmen wir an, wir haben ein Array:

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

Fügen wir eine Eigenschaft newItem hinzu, die die Arbeit der Eingabe unterstützt:

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

Geben wir den Inhalt des Arrays als Liste aus:

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

Erstellen wir nun ein Eingabefeld und eine Schaltfläche, bei deren Betätigung der Text aus der Eingabe als neuer Punkt am Ende der Liste hinzugefügt wird:

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

Beim Klicken auf die Schaltfläche wird die Methode addItem aufgerufen, die den Text aus der Eingabe nimmt und ihn als neues Element zum Array hinzufügt, was zu einer reaktiven Änderung der Liste führt:

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

Gegeben ist ein Array. Gegeben ist ein Eingabefeld. Gegeben ist eine Schaltfläche. Geben Sie die Elemente dieses Arrays als Liste ul aus. Sorgen Sie dafür, dass beim Klicken auf die Schaltfläche der Text aus der Eingabe am Ende der Liste hinzugefügt wird.

Modifizieren Sie die vorherige Aufgabe so, dass der neue Punkt am Anfang der Liste hinzugefügt wird.