Computed Properties ใน Vue

เราสามารถกำหนด properties ที่จะถูกคำนวณแบบ reactive ขึ้นอยู่กับ properties อื่นๆ Properties ดังกล่าวเรียกว่า computed properties พวกมันอยู่ในออปชัน computed

มาดูตัวอย่างกัน สมมติว่าใน data มีการเก็บชื่อและนามสกุลของผู้ใช้:

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

มาสร้าง property full ที่จะเก็บชื่อเต็มพร้อมนามสกุลกัน:

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

มาแสดงเนื้อหาของ properties ของเราใน template กัน:

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

Computed properties เปลี่ยนแปลงแบบ reactive นี่หมายความว่าหากเราเปลี่ยนชื่อหรือนามสกุล property full ของเราก็จะเปลี่ยนไปแบบ reactive ทันที และเราจะเห็นการเปลี่ยนแปลงบนหน้าจอทันที

สมมติว่าใน property cost เก็บราคาของสินค้า และใน property amount เก็บจำนวนสินค้าเหล่านี้ สร้าง computed property price ที่จะเก็บมูลค่ารวมของสินค้า (ราคาคูณกับจำนวน)

สร้างปุ่มที่เมื่อคลิกจะเปลี่ยน property cost ตรวจสอบว่า computed property นี้จะเปลี่ยนไปด้วยเมื่อเกิดเหตุการณ์นั้น