Számított tulajdonságok a Vue-ban

Be lehet állítani olyan tulajdonságokat, amelyek reaktívan számítódnak ki más tulajdonságok alapján. Az ilyen tulajdonságokat számított tulajdonságoknak nevezzük. Ezek a computed beállításban helyezkednek el.

Nézzünk egy példát. Tegyük fel, hogy a tulajdonságokban tároljuk a felhasználó keresztnevét és vezetéknevét:

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

Készítsünk egy full tulajdonságot, amely a teljes nevet tartalmazza a vezetéknévvel együtt:

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

Jelenítsük meg a nézetben a tulajdonságaink tartalmát:

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

A számított tulajdonságok reaktívan változnak. Ez azt jelenti, hogy ha megváltoztatjuk a keresztnevet vagy a vezetéknevet, akkor a full tulajdonságunk is automatikusan, reaktívan megváltozik, és azonnal látni fogjuk a változásokat a képernyőn.

Tegyük fel, hogy a cost tulajdonságban egy termék ára tárolódik, a amount tulajdonságban pedig a mennyisége. Készíts egy számított price tulajdonságot, amely a termékek teljes árát tartalmazza (ár szorozva a mennyiséggel).

Készíts egy gombot, amelyre kattintva a cost tulajdonság megváltozik. Ellenőrizd, hogy a számított tulajdonság ekkor szintén megváltozik-e.