Vetitë e Llogaritshme në Vue

Mund të përcaktohen veti të cilat do të llogariten në mënyrë reaktive bazuar në veti të tjera. Vetitë e tilla quhen veti të llogaritshme. Ato vendosen në konfigurimin computed.

Le të shohim një shembull. Le të supozojmë se në veti ruhen emri dhe mbiemri i përdoruesit:

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

Le të krijojmë një veti full, e cila do të përmbajë emrin e plotë me mbiemër:

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

Le të shfaqim në pamje përmbajtjen e vetive tona:

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

Vetitë e llogaritshme ndryshojnë në mënyrë reaktive. Kjo do të thotë se nëse ne ndryshojmë emrin ose mbiemrin, atëherë vetia jonë full do të ndryshojë automatikisht në mënyrë reaktive dhe ne menjëherë do të shohim ndryshimet në ekran.

Le të supozojmë se në vetinë cost ruhet çmimi i produktit, ndërsa në vetinë amount - sasia e këtyre produkteve. Krijo një veti të llogaritshme price, e cila do të përmbajë vlerën totale të produkteve (çmimi shumëzuar me sasinë)

Krijo një buton, klikimi i të cilit do të ndryshojë vetinë cost. Kontrollo që vetia e llogaritshme gjithashtu do të ndryshojë në këtë rast.