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

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

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

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

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

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

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

<template>
	<p>{{ name }}</p>
	<p>{{ surn }}</p>
	<p>{{ full }}</p>
</template>

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

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

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