Lasketut ominaisuudet Vuessa

Voit määrittää ominaisuuksia, jotka reaktiivisesti lasketaan muuiden ominaisuuksien perusteella. Tällaisia ominaisuuksia kutsutaan lasketuiksi ominaisuuksiksi. Ne sijaitsevat asetuksessa computed.

Katsotaanpa esimerkkiä. Oletetaan, että ominaisuuksissa tallennetaan käyttäjän etu- ja sukunimi:

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

Tehdään ominaisuus full, joka sisältää koko nimen sukunimineen:

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

Esitetään näkymässä ominaisuuksiemme sisältö:

App.vue<template>
  <p>{{ name }}</p>
  <p>{{ surn }}</p>
  <p>{{ full }}</p>
</template>

Lasketut ominaisuudet muuttuvat reaktiivisesti. Tämä tarkoittaa, että jos muutamme etu- tai sukunimeä, niin ominaisuutemme full muuttuu automaattisesti reaktiivisesti ja näemme muutokset heti ruudulla.