Vue-এ checkbox-এর সাথে কাজ করা

এখন আসুন দেখি কিভাবে checkbox-এর সাথে কাজ করা হয়। ধরা যাক আমাদের কাছে নিম্নলিখিত টগলটি রয়েছে:

App.vue<template>
  <input type="checkbox">
</template>

আসুন একটি checked বৈশিষ্ট্য তৈরি করি, যা এই checkbox-এর কাজ নিয়ন্ত্রণ করবে:

javascriptdata() {
  return {
    checked: true,
  }
}

আসুন এই বৈশিষ্ট্যটি v-model-এর মাধ্যমে বাঁধাই:

App.vue<template>
  <input type="checkbox" v-model="checked">
</template>

যদি checkbox চেক করা থাকে - তাহলে checked বৈশিষ্ট্যটির মান হবে true, এবং যদি চেক না করা থাকে - তাহলে false। এটি নিশ্চিত করতে, আপনি স্ক্রিনে বৈশিষ্ট্যের মান প্রদর্শন করতে পারেন, এভাবে:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked }}</p>
</template>

টারনারি অপারেটর ব্যবহার করে আরও অর্থপূর্ণ কিছু প্রদর্শন করা যেতে পারে:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked ? 'হ্যাঁ' : 'না' }}</p>
</template>