v-model একটি ফর্ম input এবং state-এর মধ্যে দ্বি-মুখী বাইন্ডিং তৈরি করে: input state-এর মান প্রদর্শন করে, এবং input সম্পাদন state আপডেট করে — স্বয়ংক্রিয়ভাবে, উভয় দিকে।
<script setup>
import { ref } from "vue";
const name = ref("");
</script>
<template>
<input v-model="name" />
<p>You typed: {{ name }}</p> <!-- updates live as you type -->
</template>
হুডের নিচে, একটি bind এবং listener একত্রিত করে:
v-model:value@input<!-- these two are equivalent -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
তাই এটি জাদু নয় — শুধুমাত্র bind-and-update প্যাটার্নের জন্য একটি সুবিধাজনক শর্টহ্যান্ড।
<template>
<input v-model="text" /> <!-- text -->
<textarea v-model="message" />
<input type="checkbox" v-model="agreed" /> <!-- boolean -->
<input type="radio" value="a" v-model="choice" />
<select v-model="selected">...</select>
</template>
Vue প্রতিটি নিয়ন্ত্রণ প্রকারের জন্য সঠিক সম্পত্তি/ইভেন্ট বেছে নেয় (value/input, checked/change, ইত্যাদি)।
<input v-model.trim="name" /> <!-- auto-trim whitespace -->
<input v-model.number="age" /> <!-- cast to a number -->
<input v-model.lazy="text" /> <!-- sync on `change` instead of every keystroke -->
<!-- a component can support v-model via a `modelValue` prop + `update:modelValue` event -->
<CustomInput v-model="name" />
<!-- equivalent to :model-value="name" @update:model-value="name = $event" -->
এটি আপনাকে পুনঃব্যবহারযোগ্য input কম্পোনেন্ট তৈরি করতে দেয় যা native inputs-এর মতো v-model-এর সাথে কাজ করে (Vue 3 এমনকি একাধিক নামযুক্ত v-models সমর্থন করে: v-model:title, v-model:body)।
v-model Vue-তে ফর্মের ভিত্তিপ্রস্তর — এটি দ্বি-মুখী ডেটা প্রবাহের জন্য ম্যানুয়াল value-binding + event-handling boilerplate দূর করে।
যে এটি :value + @input-এ desugars তা বোঝা এটিকে রহস্যমুক্ত করে এবং ব্যাখ্যা করে কীভাবে আপনার নিজের কম্পোনেন্টে v-model বাস্তবায়ন করতে হয়, যখন modifiers (.trim/.number/.lazy) সাধারণ input-প্রসেসিং প্রয়োজনীয়তা declaratively হ্যান্ডেল করে।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন