Właściwości wyliczone w Vue

Można ustawiać właściwości, które będą reaktywnie wyliczane na podstawie innych właściwości. Takie właściwości nazywają się wyliczonymi. Znajdują się one w opcji computed.

Spójrzmy na przykład. Niech we właściwościach przechowywane są imię i nazwisko użytkownika:

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

Stwórzmy właściwość full, która będzie zawierać pełne imię i nazwisko:

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

Wyświetlmy w widoku zawartość naszych właściwości:

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

Właściwości wyliczone zmieniają się reaktywnie. Oznacza to, że jeśli zmienimy imię lub nazwisko, to nasza właściwość full automatycznie zmieni się reaktywnie i od razu zobaczymy zmiany na ekranie.