Arvutatud omadused Vue's

Võib määrata omadusi, mis reaktiivselt arvutatakse teiste omaduste põhjal. Selliseid omadusi nimetatakse arvutatud omadusteks. Need asuvad seadistuses computed.

Vaatame näidet. Oletame, et omadustes hoitakse kasutaja ees- ja perekonnanime:

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

Teeme omaduse full, mis sisaldab täielikku nime koos perekonnanimega:

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

Kuvame mallis meie omaduste sisu:

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

Arvutatud omadused muutuvad reaktiivselt. See tähendab, et kui me muudame ees- või perekonnanime, siis ka meie omadus full muutub automaatselt reaktiivselt ja me näeme muutusi ekraanil kohe.

Oletame, et omaduses cost hoitakse toote hinda, ja omaduses amount - kogust neid tooteid. Tehke arvutatud omadus price, mis sisaldab toodete koguhinda (hind korrutatud kogusega)

Tehke nupp, mille klõps muudab omadust cost. Kontrollige, et arvutatud omadus muutub ka sel juhul.