Vue-এ ইভেন্টের মাধ্যমে ফর্ম ডেটা পাওয়া

ধরুন আমাদের একটি বাটন এবং একটি ইনপুট রয়েছে, যেখানে একটি সংখ্যা প্রবেশ করানো হয়। বাটনে ক্লিক করলে ইনপুটে প্রবেশ করানো সংখ্যার বর্গ ফলন করি। এখন বাস্তবায়নে এগিয়ে যাওয়া যাক।

সমস্যা সমাধানের জন্য আমাদের দুটি প্রপার্টি প্রয়োজন। প্রপার্টি num ইনপুটে ডেটা প্রবেশ করানোর সাথে সাথে পরিবর্তিত হবে, এবং প্রপার্টি res-এ আমরা বর্গ করার ফলাফল লিখব:

javascriptdata() {
  return {
    num: 0,
    res: 0
  }
}

এখন একটি ইনপুট তৈরি করি, এটিকে প্রপার্টি num-এর সাথে বাঁধি, একটি বাটন তৈরি করি, যাতে ক্লিক করলে মেথড calc কার্যকর হবে, এবং একটি অনুচ্ছেদও তৈরি করি, যাতে ফলাফল প্রদর্শিত হবে:

App.vue<template>
  <p>{{ res }}</p>
  <input v-model="num">
  <button v-on:click="calc">work</button>
</template>

এখন মেথড calc-এর বাস্তবায়ন লিখি:

javascriptmethods: {
  calc: function() {
    this.res = this.num ** 2;
  }
}

এর ফলে, যতবার মেথড calc কল হবে (এবং এটি ঘটবে বাটনে চাপ দিলে), প্রপার্টি res-এ ফলাফল লেখা হবে এবং একই সাথে আমাদের অনুচ্ছেদে প্রদর্শিত হবে।