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:

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

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

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

Lad os udskrive indholdet af vores egenskaber i templaten:

App.vue<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.