Jassif Team Institution

Vue Computed Properties

কম্পিউটেড প্রোপার্টি ডাটা প্রোপার্টির মত, ব্যতীত তারা অন্যান্য প্রোপার্টির উপর নির্ভর করে।

গণনা করা বৈশিষ্ট্যগুলি পদ্ধতির মতো লেখা হয়, তবে তারা কোনও ইনপুট আর্গুমেন্ট গ্রহণ করে না।

নির্ভরতা পরিবর্তিত হলে গণনাকৃত বৈশিষ্ট্যগুলি স্বয়ংক্রিয়ভাবে আপডেট হয়, যেখানে কিছু ঘটলে পদ্ধতিগুলিকে বলা হয়, উদাহরণস্বরূপ ইভেন্ট পরিচালনার সাথে।

গণনা করা বৈশিষ্ট্যগুলি ব্যবহার করা হয় যখন অন্য কিছুর উপর নির্ভর করে এমন কিছু প্রকাশিত হয়।

Computed Properties are Dynamic

একটি গণনাকৃত সম্পত্তির একটি বড় সুবিধা হল এটি গতিশীল, যার অর্থ এটি এক বা একাধিক ডেটা বৈশিষ্ট্যের মানের উপর নির্ভর করে পরিবর্তিত হয়।

কম্পিউটেড প্রোপার্টি হল Vue উদাহরণের তৃতীয় কনফিগারেশন বিকল্প যা আমরা শিখব। আমরা ইতিমধ্যে দেখেছি প্রথম দুটি কনফিগারেশন বিকল্প হল 'ডেটা' এবং 'পদ্ধতি'।

কম্পিউটেড প্রপার্টি, যেমন 'ডেটা' এবং 'পদ্ধতি', Vue ইনস্ট্যান্সে একটি বরাদ্দ করা নাম আছে: 'কম্পিউটেড'।

const app = Vue.createApp({
  data() {
    ...
  },
  computed: {
    ...
  },
  methods: {
    ...
  }
})

Computed Property 'yes' or 'no'

ধরুন আমরা একটি কেনাকাটার তালিকায় আইটেম তৈরি করার জন্য একটি ফর্ম রাখতে চাই এবং আমরা একটি নতুন আইটেম গুরুত্বপূর্ণ কি না তা চিহ্নিত করতে চাই। চেকবক্স চেক করা হলে আমরা একটি 'সত্য' বা 'মিথ্যা' প্রতিক্রিয়া যোগ করতে পারি, যেমনটি আমরা পূর্ববর্তী উদাহরণে করেছি:

<input type="checkbox" v-model="chbxVal"> {{ chbxVal }}

data() {
  return {
    chbxVal: false
  }
}

যাইহোক, আপনি যদি কাউকে জিজ্ঞাসা করেন যে কিছু গুরুত্বপূর্ণ কিনা, তারা 'সত্য' বা 'মিথ্যা' এর পরিবর্তে 'হ্যাঁ' বা 'না' উত্তর দেবে। তাই আমাদের ফর্মকে স্বাভাবিক ভাষার সাথে আরও বেশি করে সঙ্গতিপূর্ণ করতে (আরো স্বজ্ঞাত), আমরা চাই চেকবক্সে 'সত্য' বা 'মিথ্যা' এর পরিবর্তে 'হ্যাঁ' বা 'না' প্রতিক্রিয়া থাকুক।

এবং অনুমান করুন কি, একটি গণনা করা সম্পত্তি এটি আমাদের সাহায্য করার জন্য একটি দুর্দান্ত সরঞ্জাম।

<input type="checkbox" v-model="chbxVal"> {{ isImportant }}

data() {
  return {
    chbxVal: false
  }
},
computed: {
  isImportant() {
    if(this.chbxVal){
      return 'yes'
    }
    else {
      return 'no'
    }
  }
}

Computed Properties vs. Methods

গণনাকৃত বৈশিষ্ট্য এবং পদ্ধতি উভয়ই ফাংশন হিসাবে লেখা হয়, তবে সেগুলি আলাদা:

• HTML থেকে কল করার সময় পদ্ধতিগুলি কার্যকর করা হয়, কিন্তু নির্ভরতা পরিবর্তন হলে গণনা করা বৈশিষ্ট্যগুলি স্বয়ংক্রিয়ভাবে আপডেট হয়।
• গণনা করা বৈশিষ্ট্যগুলি ডেটা বৈশিষ্ট্যগুলির মতোই ব্যবহার করা হয় তবে গতিশীল।

Vue Exercises

সঠিক কোড প্রদান করুন যাতে 'isimportant' গণনা করা সম্পত্তি স্ক্রিনে প্রদর্শিত হয়।

<div id="app">
  <form>
    <p>
      Important item?
      <label>
         <input type="checkbox" v-model="chbxVal"> 
         ______
      </label>
    </p>
  </form>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        chbxVal: false
      }
    },
    ______: {
      isImportant() {
        if(this.chbxVal){
          return 'yes'
        }
        else {
          return 'no'
        }
      }
    }
  })
 app.mount('#app')
</script>