Właściwości wyliczone w Vue

Można ustawiać właściwości, które będą reaktywnie wyliczane na podstawie innych właściwości. Takie właściwości nazywają się wyliczonymi. Znajdują się one w opcji computed.

Spójrzmy na przykład. Niech we właściwościach przechowywane są imię i nazwisko użytkownika:

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

Stwórzmy właściwość full, która będzie zawierać pełne imię i nazwisko:

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

Wyświetlmy w widoku zawartość naszych właściwości:

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

Właściwości wyliczone zmieniają się reaktywnie. Oznacza to, że jeśli zmienimy imię lub nazwisko, to nasza właściwość full automatycznie zmieni się reaktywnie i od razu zobaczymy zmiany na ekranie.

Niech we właściwości cost przechowywana jest cena produktu, a we właściwości amount - ilość tych produktów. Stwórz wyliczaną właściwość price, która będzie zawierać pełną wartość produktów (cena pomnożona przez ilość)

Stwórz przycisk, którego kliknięcie będzie zmieniać właściwość cost. Sprawdź, że wyliczana właściwość również będzie się zmieniać przy tym.