Berekende eigenschappen in Vue

Je kunt eigenschappen instellen die reactief worden berekend op basis van andere eigenschappen. Dergelijke eigenschappen worden berekende eigenschappen genoemd. Ze bevinden zich in de optie computed.

Laten we een voorbeeld bekijken. Stel dat de voornaam en achternaam van de gebruiker in de eigenschappen zijn opgeslagen:

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

Laten we een eigenschap full maken die de volledige naam met achternaam bevat:

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

Laten we de inhoud van onze eigenschappen in de template weergeven:

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

Berekende eigenschappen veranderen reactief. Dit betekent dat als we de voornaam of achternaam wijzigen, onze eigenschap full automatisch reactief zal veranderen en we de wijzigingen direct op het scherm zullen zien.

Stel dat in de eigenschap cost de prijs van een product is opgeslagen, en in de eigenschap amount - de hoeveelheid van deze producten. Maak een berekende eigenschap price die de totale kosten van de producten bevat (prijs vermenigvuldigd met de hoeveelheid).

Maak een knop waarop een klik de eigenschap cost zal wijzigen. Controleer of de berekende eigenschap dan ook verandert.