Αντίδραση Πινάκων στο Vue

Η αντίδραση ενεργοποιείται ακόμη και κατά τις αλλαγές των πινάκων που εμφανίζονται μέσω v-for. Ας κάνουμε για παράδειγμα έτσι ώστε με το πάτημα ενός κουμπιού στον πίνακα να προστίθεται αντιδραστικά ένα νέο στοιχείο και οι αλλαγές να συμβαίνουν αμέσως και στην οθόνη.

Ας υλοποιήσουμε τα παραπάνω. Ας υποθέσουμε ότι έχουμε έναν πίνακα:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

Ας εμφανίσουμε τα στοιχεία αυτού του πίνακα σε έναν βρόχο:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
</template>

Ας φτιάξουμε ένα κουμπί, με το πάτημα του οποίου στον πίνακα θα προστίθεται ένα νέο στοιχείο:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
	<button @click="add">προσθήκη</button>
</template>

Ας υλοποιήσουμε την αντίστοιχη μέθοδο:

methods: {
	add: function() {
		this.arr.push('xxx');
	}
}

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

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

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

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

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

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

Εξαιρέσεις

Λόγω περιορισμών της JavaScript, το Vue δεν είναι ικανό να ανιχνεύσει τις ακόλουθες αλλαγές σε έναν πίνακα: την απευθείας εκχώρηση ενός στοιχείου με βάση το ευρετήριο: items[κλειδί] = νέαΤιμή και την ρητή αλλαγή του μήκους του πίνακα, για παράδειγμα: items.length = νέοΜήκος.