Aprēķināmās īpašības Vue

Var iestatīt īpašības, kas tiks reaktīvi aprēķinātas pamatojoties uz citām īpašībām. Šādas īpašības sauc par aprēķināmajām. Tās atrodas iestatījumos computed.

Apskatīsim piemērā. Lai īpašībās glabājas lietotāja vārds un uzvārds:

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

Izveidosim īpašību full, kas saturēs pilno vārdu ar uzvārdu:

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

Izvadīsim skatā mūsu īpašību saturu:

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

Aprēķināmās īpašības mainās reaktīvi. Tas nozīmē, ka, ja mēs mainīsim vārdu vai uzvārdu, tad arī mūsu īpašība full automātiski reaktīvi mainīsies un mēs uzreiz ieraudzīsim izmaiņas ekrānā.

Lai īpašībā cost glabājas produkta cena, bet īpašībā amount - šo produktu daudzums. Izveidojiet aprēķināmo īpašību price, kas saturēs pilno produktu vērtību (cena reizināta ar daudzumu)

Izveidojiet pogu, kuras klikšķis mainīs īpašību cost. Pārbaudiet, ka aprēķināmā īpašība arī mainīsies šajā gadījumā.