Vue में कंप्यूटेड प्रॉपर्टीज़

आप ऐसे गुण निर्धारित कर सकते हैं जो अन्य गुणों के आधार पर रिएक्टिव तरीके से गणना किए जाएंगे। ऐसे गुणों को कंप्यूटेड प्रॉपर्टीज़ कहा जाता है। वे कॉन्फ़िगरेशन computed में स्थित होते हैं।

आइए एक उदाहरण देखें। मान लीजिए कि गुणों में संग्रहीत है उपयोगकर्ता का नाम और उपनाम:

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

आइए एक गुण बनाएं full, जो उपनाम के साथ पूरा नाम रखेगा:

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

आइए हमारे गुणों की सामग्री को व्यू में प्रदर्शित करें:

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

कंप्यूटेड प्रॉपर्टीज़ रिएक्टिव तरीके से बदलती हैं। इसका मतलब है कि यदि हम नाम या उपनाम बदलते हैं, तो हमारा गुण full स्वचालित रूप से रिएक्टिव तरीके से बदल जाएगा और हमें तुरंत परिवर्तन दिखाई देंगे स्क्रीन पर।

मान लीजिए कि गुण cost में उत्पाद की कीमत संग्रहीत है, और गुण amount में - इस उत्पाद की मात्रा। एक कंप्यूटेड गुण price बनाएं, जो उत्पादों की कुल लागत रखेगा (कीमत गुणा मात्रा)

एक बटन बनाएं, जिस पर क्लिक करने से गुण cost बदल जाएगा। जांचें कि कंप्यूटेड गुण भी इसके साथ बदल जाएगा।