Computed Properties ve Vue

Lze definovat vlastnosti, které se budou reaktivně vypočítávat na základě jiných vlastností. Takové vlastnosti se nazývají vypočítávané. Nacházejí se v konfiguraci computed.

Podívejme se na příklad. Nechť ve vlastnostech je uloženo křestní jméno a příjmení uživatele:

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

Vytvořme vlastnost full, která bude obsahovat celé jméno s příjmením:

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

Vypišme v šabloně obsah našich vlastností:

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

Vypočítávané vlastnosti se mění reaktivně. To znamená, že pokud změníme křestní jméno nebo příjmení, tak i naše vlastnost full se automaticky reaktivně změní a okamžitě uvidíme změny na obrazovce.

Nechť ve vlastnosti cost je uložena cena produktu, a ve vlastnosti amount - množství těchto produktů. Vytvořte vypočítávanou vlastnost price, která bude obsahovat celkovou hodnotu produktů (cena vynásobená množstvím)

Vytvořte tlačítko, klik na které bude měnit vlastnost cost. Ověřte, že vypočítávaná vlastnost se při tom také bude měnit.