Properti Terkomputasi di Vue

Anda dapat mengatur properti yang akan dikomputasi secara reaktif berdasarkan properti lainnya. Properti seperti ini disebut properti terkomputasi. Mereka ditempatkan dalam opsi computed.

Mari kita lihat sebuah contoh. Misalkan dalam properti disimpan nama depan dan nama belakang pengguna:

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

Mari buat properti full, yang akan berisi nama lengkap dengan nama belakang:

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

Tampilkan isi properti kita dalam template:

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

Properti terkomputasi berubah secara reaktif. Ini berarti bahwa jika kita mengubah nama depan atau nama belakang, maka properti full kita akan secara otomatis berubah secara reaktif dan kita akan segera melihat perubahannya pada layar.

Misalkan dalam properti cost disimpan harga sebuah produk, dan dalam properti amount - jumlah produk tersebut. Buatlah properti terkomputasi price, yang akan berisi total harga produk (harga dikalikan dengan jumlah)

Buat sebuah tombol, klik yang akan mengubah properti cost. Pastikan bahwa properti terkomputasi juga akan berubah karenanya.