Vypočítané vlastnosti vo Vue

Je možné nastaviť vlastnosti, ktoré sa budú reaktívne vypočítavať na základe iných vlastností. Takéto vlastnosti sa nazývajú vypočítavané. Nachádzajú sa v nastavení computed.

Pozrime sa na príklad. Nech v vlastnostiach je uložené meno a priezvisko používateľa:

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

Vytvorme vlastnosť full, ktorá bude obsahovať celé meno s priezviskom:

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

Vypíšme v prezentácii obsah našich vlastností:

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

Vypočítavané vlastnosti sa menia reaktívne. To znamená, že ak zmeníme meno alebo priezvisko, tak naša vlastnosť full sa automaticky reaktívne zmení a okamžite uvidíme zmeny na obrazovke.

Nech vo vlastnosti cost je uložená cena produktu, a vo vlastnosti amount - množstvo týchto produktov. Vytvorte vypočítavanú vlastnosť price, ktorá bude obsahovať celkovú hodnotu produktov (cena vynásobená množstvom)

Vytvorte tlačidlo, klik na ktoré zmení vlastnosť cost. Skontrolujte, že vypočítavaná vlastnosť sa tiež zmení pri tom.