Proprietăți Calculate în Vue

Se pot defini proprietăți care vor fi calculate reactiv pe baza altor proprietăți. Astfel de proprietăți se numesc calculate. Ele sunt situate în opțiunea computed.

Să vedem un exemplu. Să presupunem că în proprietăți sunt stocate prenumele și numele utilizatorului:

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

Să creăm o proprietate full, care va conține numele complet cu numele de familie:

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

Să afișăm în template conținutul proprietăților noastre:

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

Proprietățile calculate se modifică reactiv. Aceasta înseamnă că dacă vom schimba prenumele sau numele, atunci și proprietatea noastră full se va schimba automat reactiv și vom vedea imediat modificările pe ecran.

Să presupunem că în proprietatea cost este stocat prețul produsului, iar în proprietatea amount - cantitatea acestor produse. Creați o proprietate calculată price, care va conține costul total al produselor (prețul înmulțit cu cantitatea)

Creați un buton, a cărui click va schimba proprietatea cost. Verificați că și proprietatea calculată se va schimba în acest caz.