Израчунава својства у Vue-у

Могуће је дефинисати својства која ће се реактивно израчунавати на основи других својстава. Таква својства се називају израчунава. Они се налазе у опцији computed.

Хајде да погледамо пример. Претпоставимо да у својствима је сачувано име и презиме корисника:

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

Направимо својство full, које ће садржати пуно име са презименом:

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

Прикажимо у представу садржај наших својстава:

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

Израчунава својства се мењају реактивно. То значи да ако променимо име или презиме, онда ће се и наше својство full аутоматски реактивно променити и ми ћемо одмах видети промене на екрану.

Задание 1

Претпоставимо да у својству cost је сачувана цена производа, а у својству amount - количина тих производа. Направите израчунаво својство price, које ће садржати укупну вредност производа (цена помножена са количином)

Задание 2

Направите дугме, клик на које ће мењати својство cost. Проверите да ли се израчунаво својство такође мења при томе.