v-model দিয়ে ফর্ম ডেটা বাইন্ডিং

Vue.js এ ফর্ম ডেটা বাইন্ডিং করা একটি সহজ এবং শক্তিশালী প্রক্রিয়া। Vue.js এর v-model ডিরেকটিভটি ফর্ম ইনপুট এলিমেন্টের (যেমন <input>, <textarea>, <select>) সাথে ডেটা বাইন্ডিং করার জন্য ব্যবহৃত হয়। এটি টু-ওয়ে ডেটা বাইন্ডিং বাস্তবায়ন করে, যার মানে হল যে যখন আপনি ইনপুট ফিল্ডে ডেটা পরিবর্তন করেন, তখন সেই পরিবর্তন Vue এর ডেটা প্রপার্টিতে প্রতিফলিত হয়, এবং বিপরীতভাবে, যখন ডেটা পরিবর্তন হয়, তখন ইনপুট ফিল্ডটি স্বয়ংক্রিয়ভাবে আপডেট হয়।

v-model এর কাজের ব্যাখ্যা

v-model ডিরেকটিভের মাধ্যমে আপনি একটি ফর্ম ইনপুট এবং Vue.js এর ডেটা প্রপার্টির মধ্যে বাইন্ডিং তৈরি করতে পারেন। এটি স্বয়ংক্রিয়ভাবে input, change ইভেন্টগুলো হ্যান্ডেল করে এবং ইনপুট ফিল্ডের মানকে Vue ইনস্ট্যান্সের ডেটার সাথে সিঙ্ক্রোনাইজ করে।

v-model এর মূল বৈশিষ্ট্য:

1. টু-ওয়ে ডেটা বাইন্ডিং: ইনপুট ফিল্ড এবং Vue ডেটার মধ্যে ডেটার আদান-প্রদান।
2. সরাসরি ইনপুট ফিল্ডের মান পরিবর্তন: যখন ডেটার মান পরিবর্তিত হয়, তখন ইনপুট ফিল্ড স্বয়ংক্রিয়ভাবে আপডেট হয়।
3. কম্পোনেন্টের মাধ্যমে ডেটা সিঙ্ক্রোনাইজেশন: কম্পোনেন্টের মধ্যে v-model ব্যবহার করে ডেটা প্রপার্টির মান পরিবর্তন এবং ইনপুট ফিল্ডের মানের মধ্যে সিঙ্ক্রোনাইজেশন করা হয়।

সাধারণ উদাহরণ: v-model দিয়ে ইনপুট ফিল্ডে ডেটা বাইন্ডিং

<div id="app">
  <label for="name">Name:</label>
  <input type="text" v-model="name">
  <p>Your name is: {{ name }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: ''
    }
  });
</script>

এখানে:

• v-model="name" ব্যবহার করে ইনপুট ফিল্ডের সাথে name ডেটা প্রপার্টি বাইন্ড করা হয়েছে।
• {{ name }} দ্বারা ডেটা পরিবর্তনের সাথে সাথে প্যারাগ্রাফে name এর মান দেখানো হচ্ছে।

যখন আপনি ইনপুট ফিল্ডে কিছু টাইপ করবেন, তখন name এর মান পরিবর্তিত হবে এবং তা স্বয়ংক্রিয়ভাবে <p> ট্যাগে দেখানো হবে। এটি টু-ওয়ে ডেটা বাইন্ডিং এর উদাহরণ।

v-model দিয়ে চেকবক্স, রেডিও বাটন, এবং সিলেক্ট ডেটা বাইন্ডিং

১. চেকবক্স (Checkbox)

চেকবক্সের সাথে v-model ব্যবহার করলে আপনি চেকবক্সের মান বা স্টেটকে Vue ডেটার সাথে বাইন্ড করতে পারেন।

<div id="app">
  <label>
    <input type="checkbox" v-model="isChecked">
    I agree to the terms and conditions
  </label>
  <p>Agreed: {{ isChecked }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isChecked: false
    }
  });
</script>

এখানে, isChecked ডেটা প্রপার্টি চেকবক্সের সাথে বাইন্ড করা হয়েছে। চেকবক্সের মান পরিবর্তন হলে, isChecked এর মান স্বয়ংক্রিয়ভাবে আপডেট হবে।

২. রেডিও বাটন (Radio Button)

রেডিও বাটন ব্যবহার করতে হলে, v-model এর মাধ্যমে আপনি একটি গোষ্ঠী (group) এর মধ্যে একক মান নির্বাচন করতে পারবেন।

<div id="app">
  <label>
    <input type="radio" v-model="picked" value="Apple">
    Apple
  </label>
  <label>
    <input type="radio" v-model="picked" value="Banana">
    Banana
  </label>
  <p>You picked: {{ picked }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      picked: 'Apple'
    }
  });
</script>

এখানে, picked ডেটা প্রপার্টি রেডিও বাটনের মধ্যে নির্বাচিত মান ধারণ করবে। আপনি "Apple" অথবা "Banana" নির্বাচন করলে, picked এর মান স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।

৩. সিলেক্ট (Select)

সিলেক্ট বক্সের সাথে v-model ব্যবহার করা হলে আপনি ড্রপডাউন থেকে নির্বাচন করা মান Vue ডেটার সাথে বাইন্ড করতে পারেন।

<div id="app">
  <label for="fruit">Select a fruit:</label>
  <select v-model="selectedFruit">
    <option disabled value="">Please select one</option>
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
  <p>You selected: {{ selectedFruit }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      selectedFruit: ''
    }
  });
</script>

এখানে, v-model="selectedFruit" সিলেক্ট বক্সের সাথে বাইন্ডিং করে, ফলে যখন আপনি একটি ফল নির্বাচন করবেন, তখন selectedFruit ডেটা প্রপার্টির মান স্বয়ংক্রিয়ভাবে আপডেট হবে।

v-model এবং কম্পোনেন্টের সাথে ব্যবহার

আপনি v-model ব্যবহার করে কাস্টম কম্পোনেন্টের সাথে ডেটা বাইন্ডিংও করতে পারেন। এটি সাধারণত কাস্টম ইনপুট ফিল্ড বা ফর্ম কম্পোনেন্টের জন্য ব্যবহৃত হয়।

কাস্টম কম্পোনেন্টের সাথে v-model

<div id="app">
  <custom-input v-model="customValue"></custom-input>
  <p>Custom Value: {{ customValue }}</p>
</div>

<script>
  Vue.component('custom-input', {
    template: '<input :value="value" @input="$emit(\'input\', $event.target.value)">',
    props: ['value']
  });

  new Vue({
    el: '#app',
    data: {
      customValue: ''
    }
  });
</script>

এখানে, v-model ব্যবহার করে কাস্টম ইনপুট কম্পোনেন্টের সাথে ডেটা বাইন্ড করা হয়েছে। input ইভেন্টের মাধ্যমে কাস্টম কম্পোনেন্টটি তার মানটি প্যারেন্ট কম্পোনেন্টের সাথে সিঙ্ক্রোনাইজ করে।

সারাংশ

• v-model হল Vue.js এর একটি শক্তিশালী ডিরেকটিভ যা ফর্ম ইনপুট ফিল্ডের সাথে ডেটা বাইন্ডিংয়ের সুবিধা দেয়।
• এটি টু-ওয়ে ডেটা বাইন্ডিং প্রদান করে, অর্থাৎ ইনপুট ফিল্ডে মান পরিবর্তন হলে Vue ডেটা প্রপার্টি আপডেট হয় এবং ডেটা পরিবর্তন হলে ইনপুট ফিল্ড আপডেট হয়।
• v-model ইনপুট ফিল্ডের সাথে চেকবক্স, রেডিও বাটন, সিলেক্ট, এবং কাস্টম কম্পোনেন্টের সাথে সহজে কাজ করতে পারে।

Vue.js এর v-model ডিরেকটিভটি ফর্ম ডেটার সঙ্গে সহজে কাজ করতে সাহায্য করে, এবং এটি আপনার অ্যাপ্লিকেশন ডেভেলপমেন্টে অনেক সময় সাশ্রয়ী হতে পারে।