Пресметани својства во 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. Проверете дека пресметаното својство исто така ќе се менува при тоа.