Izračunata svojstva u Vue

Moguće je definisati svojstva koja će se reaktivno izračunavati na osnovu drugih svojstava. Takva svojstva se nazivaju izračunatim. Oni se nalaze u opciji computed.

Hajde da pogledamo primer. Neka u svojstvima bude sačuvano ime i prezime korisnika:

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

Hajde da napravimo svojstvo full, koje će sadržati puno ime sa prezimenom:

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

Ispišimo u predstavljanju sadržaj naših svojstava:

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

Izračunata svojstva se menjaju reaktivno. To znači da ako promenimo ime ili prezime, onda će i naše svojstvo full automatski reaktivno da se promeni i odmah ćemo videti promene na ekranu.

Задание 1

Neka u svojstvu cost bude sačuvana cena proizvoda, a u svojstvu amount - količina tih proizvoda. Napravite izračunato svojstvo price, koje će sadržati punu vrednost proizvoda (cena pomnožena sa količinom)

Задание 2

Napravite dugme, klik na koje će promeniti svojstvo cost. Proverite da će se izračunato svojstvo takođe promeniti prilikom toga.