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

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

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

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

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

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

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

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

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

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

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

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

একটি ইনপুট, 3টি অনুচ্ছেদ এবং একটি বাটন দেওয়া আছে। ইনপুটে ব্যবহারকারীর পুরো নাম (ফইন) একটি স্পেস দিয়ে প্রবেশ করানো হয়। বাটনে ক্লিক করলে প্রথম অনুচ্ছেদে ব্যবহারকারীর উপাধি, দ্বিতীয়তে - নাম, এবং তৃতীয়তে - পিতৃনাম/ডাকনাম প্রদর্শিত হয় তা করুন।