Beregnede Egenskaber i Vue

Det er muligt at definere egenskaber, som reaktivt vil blive beregnet baseret på andre egenskaber. Sådanne egenskaber kaldes beregnede. De placeres i indstillingen computed.

Lad os se på et eksempel. Lad os antage, at der i egenskaberne gemmes brugerens fornavn og efternavn:

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

Lad os oprette en egenskab full, som vil indeholde det fulde navn inklusive efternavn:

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

Lad os udskrive indholdet af vores egenskaber i templaten:

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

Beregnede egenskaber ændres reaktivt. Det betyder, at hvis vi ændrer fornavnet eller efternavnet, så vil vores egenskab full automatisk reaktivt ændre sig, og vi vil straks se ændringerne på skærmen.

Lad os antage, at egenskaben cost indeholder prisen på et produkt, og egenskaben amount - antallet af disse produkter. Lav en beregnet egenskab price, som vil indeholde den samlede værdi af produkterne (pris ganget med antal)

Lav en knap, hvor et klik vil ændre egenskaben cost. Kontroller, at den beregnede egenskab også ændres som følge heraf.