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:

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

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

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

Izpišimo v predstavitvi vsebino naših lastnosti:

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

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)

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