Számított tulajdonságok a Vue-ban

Be lehet állítani olyan tulajdonságokat, amelyek reaktívan számítódnak ki más tulajdonságok alapján. Az ilyen tulajdonságokat számított tulajdonságoknak nevezzük. Ezek a computed beállításban helyezkednek el.

Nézzünk egy példát. Tegyük fel, hogy a tulajdonságokban tároljuk a felhasználó keresztnevét és vezetéknevét:

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

Készítsünk egy full tulajdonságot, amely a teljes nevet tartalmazza a vezetéknévvel együtt:

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

Jelenítsük meg a nézetben a tulajdonságaink tartalmát:

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

A számított tulajdonságok reaktívan változnak. Ez azt jelenti, hogy ha megváltoztatjuk a keresztnevet vagy a vezetéknevet, akkor a full tulajdonságunk is automatikusan, reaktívan megváltozik, és azonnal látni fogjuk a változásokat a képernyőn.