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:

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

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

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

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

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