Φόρμα για Προσθήκη Στοιχείων Πίνακα στο 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>

Ας δημιουργήσουμε τώρα ένα πεδίο εισαγωγής και ένα κουμπί, upon πατώντας το οποίο το κείμενο από το πεδίο εισαγωγής θα προστεθεί στο τέλος της λίστας ως νέο στοιχείο:

<template>
	<input v-model="newItem">
	<button @click="addItem">προσθήκη</button>
</template>

Πατώντας το κουμπί θα καλείται η μέθοδος addItem, η οποία θα παίρνει το κείμενο από το πεδίο εισαγωγής και θα το προσθέτει ως νέο στοιχείο στον πίνακα, οδηγώντας σε αντιδραστική αλλαγή της λίστας:

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

Δίνεται ένας πίνακας. Δίνεται ένα πεδίο εισαγωγής. Δίνεται ένα κουμπί. Εμφανίστε τα στοιχεία αυτού του πίνακα ως μια λίστα ul. Κάντε έτσι ώστε πατώντας το κουμπί να προστεθεί στο τέλος της λίστας το κείμενο από το πεδίο εισαγωγής.

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε το νέο στοιχείο να προστίθεται στην αρχή της λίστας.