Lasketut ominaisuudet Vuessa

Voit määrittää ominaisuuksia, jotka reaktiivisesti lasketaan muuiden ominaisuuksien perusteella. Tällaisia ominaisuuksia kutsutaan lasketuiksi ominaisuuksiksi. Ne sijaitsevat asetuksessa computed.

Katsotaanpa esimerkkiä. Oletetaan, että ominaisuuksissa tallennetaan käyttäjän etu- ja sukunimi:

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

Tehdään ominaisuus full, joka sisältää koko nimen sukunimineen:

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

Esitetään näkymässä ominaisuuksiemme sisältö:

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

Lasketut ominaisuudet muuttuvat reaktiivisesti. Tämä tarkoittaa, että jos muutamme etu- tai sukunimeä, niin ominaisuutemme full muuttuu automaattisesti reaktiivisesti ja näemme muutokset heti ruudulla.

Oletetaan, että ominaisuudessa cost talletetaan tuotteen hinta, ja ominaisuudessa amount - näiden tuotteiden määrä. Tee laskettu ominaisuus price, joka sisältää tuotteiden kokonaishinnan (hinta kerrottuna määrällä).

Tee painike, jonka klikkaus muuttaa ominaisuutta cost. Tarkista, että laskettu ominaisuus myös muuttuu tällöin.