Διατρέχοντας Πίνακες στο Vue

Το Vue επιτρέπει τη δημιουργία ετικετών σε βρόγχο. Αυτό γίνεται με την ειδική directive v-for. Ας δούμε πώς λειτουργεί για πίνακες. Για να το κάνουμε αυτό, ας φτιάξουμε τον ακόλουθο πίνακα:

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

Ας εμφανίσουμε κάθε στοιχείο αυτού του πίνακα σε ξεχωριστή παράγραφο. Για να το κάνουμε αυτό στην προβολή ας φτιάξουμε πρώτα μια παράγραφο:

<template>
	<p></p>
</template>

Τώρα ας γράψουμε στην παράγραφό μας την directive v-for. Ως τιμή αυτής της directive θα πρέπει να ορίσουμε το όνομα του πίνακα που διατρέχουμε και τη μεταβλητή, στην οποία διαδοχικά θα πέφτουν τα στοιχεία αυτού του πίνακα. Στην περίπτωσή μας το όνομα του πίνακα θα είναι arr, και για τη μεταβλητή θα βρούμε το όνομα elem:

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

Ως αποτέλεσμα, η παράγραφός μας θα επαναληφθεί τόσες φορές, όσα στοιχεία υπάρχουν στον πίνακα μας. Ας εμφανίσουμε τα στοιχεία που διατρέχουμε στο κείμενο των παραγράφων μας:

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

Έστω ότι στο data αποθηκεύεται ο ακόλουθος πίνακας:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Εμφανίστε κάθε στοιχείο αυτού του πίνακα στο δικό του tag div.

Δίνεται ο ακόλουθος πίνακας:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Εμφανίστε το τετράγωνο κάθε στοιχείου αυτού του πίνακα στο δικό του tag div.

Δίνεται ο ακόλουθος πίνακας:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Εμφανίστε τα στοιχεία αυτού του πίνακα ως λίστα ul.