Izračunane lastnosti v Vue

Lahko nastavite lastnosti, ki se bodo reaktivno izračunale na podlagi drugih lastnosti. Takšne lastnosti imenujemo izračunane. Nahajajo se v nastavitvi computed.

Poglejmo si primer. Naj v lastnostih hrani ime in priimek uporabnika:

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

Naredimo lastnost full, ki bo vsebovala polno ime s priimkom:

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

Izpišimo v predstavitvi vsebino naših lastnosti:

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

Izračunane lastnosti se spreminjajo reaktivno. To pomeni, da če spremenimo ime ali priimek, se bo tudi naša lastnost full avtomatično reaktivno spremenila in takoj bomo videli spremembe na zaslonu.

Задание 1

Naj v lastnosti cost hrani cena izdelka, v lastnosti amount pa količina teh izdelkov. Naredite izračunano lastnost price, ki bo vsebovala skupno vrednost izdelkov (cena pomnožena s količino)

Задание 2

Naredite gumb, katerega klik bo spremenil lastnost cost. Preverite, ali se bo izračunana lastnost prav tako spremenila ob tem.