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:

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

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

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

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

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