Vue-এ ইনপুটগুলিতে দ্বি-দিকনির্দেশনা ডেটা বাইন্ডিং

এখন আমরা Vue ফ্রেমওয়ার্কে ইনপুটগুলির সাথে কাজ করা শিখব। এর সাহায্যে আমরা পৃষ্ঠায় প্রতিক্রিয়াশীলভাবে ডেটা যোগ করব। চলুন শুরু করা যাক। ধরুন আমাদের একটি ইনপুট আছে:

App.vue<template>
  <input>
</template>

ধরুন আমাদের একটি প্রপার্টি messageও আছে:

javascriptdata() {
  return {
    message: 'hello',
  }
}

আমরা এই প্রপার্টি এবং ইনপুটটিকে এমনভাবে লিঙ্ক করতে পারি যাতে তাদের যেকোনো একটির পরিবর্তন অন্যটির পরিবর্তন ঘটায়। এটি v-model ডাইরেক্টিভ ব্যবহার করে করা হয়, যেখানে ইনপুটটির সাথে বাউন্ড প্রপার্টিটি নির্দিষ্ট করা থাকে।

চলুন আমাদের ইনপুটটিকে message প্রপার্টির সাথে বাইন্ড করি:

App.vue<template>
  <input v-model="message">
</template>

কোড চালানোর পরে, ইনপুটটিতে message প্রপার্টির টেক্সট থাকবে। এবং যদি ইনপুটের ডেটা এডিট করা হয় - প্রপার্টিটিও সেই অনুযায়ী পরিবর্তিত হবে। এটি দেখতে, চলুন ইনপুটে প্রবেশ করানো বিষয়বস্তু একটি প্যারাগ্রাফে আউটপুট করি:

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