Υπολογιζόμενες Ιδιότητες στο Vue

Μπορείτε να ορίσετε ιδιότητες που θα υπολογίζονται αντιδραστικά βασισμένες σε άλλες ιδιότητες. Αυτές οι ιδιότητες ονομάζονται υπολογιζόμενες. Βρίσκονται στη ρύθμιση computed.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι στις ιδιότητες αποθηκεύεται το όνομα και το επώνυμό του χρήστη:

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

Ας φτιάξουμε μια ιδιότητα full, που θα περιέχει το πλήρες όνομα με το επώνυμο:

computed: {
	full: function() {
		return this.name + ' ' + this.surn;
	}
}

Ας εμφανίσουμε στο template το περιεχόμενο των ιδιοτήτων μας:

<template>
	<p>{{ name }}</p>
	<p>{{ surn }}</p>
	<p>{{ full }}</p>
</template>

Οι υπολογιζόμενες ιδιότητες αλλάζουν αντιδραστικά. Αυτό σημαίνει ότι αν αλλάξουμε το όνομα ή το επώνυμο, τότε και η ιδιότητα full θα αλλάξει αυτόματα και αντιδραστικά και θα δούμε αμέσως τις αλλαγές στην οθόνη.

Ας υποθέσουμε ότι στην ιδιότητα cost αποθηκεύεται η τιμή ενός προϊόντος, και στην ιδιότητα amount - η ποσότητα αυτών των προϊόντων. Φτιάξτε μια υπολογιζόμενη ιδιότητα price, που θα περιέχει τη συνολική αξία των προϊόντων (τιμή πολλαπλασιασμένη με την ποσότητα)

Φτιάξτε ένα κουμπί, το πάτημα του οποίου θα αλλάζει την ιδιότητα cost. Ελέγξτε ότι η υπολογιζόμενη ιδιότητα θα αλλάζει επίσης κατά αυτό.