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:

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

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

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

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

<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.

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)

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