v-model form input اور state کے درمیان دو طرفہ binding بناتا ہے: input state کی value کو دکھاتا ہے، اور input کو edit کرنے سے state update ہوتا ہے — خودکار طور پر، دونوں سمتوں میں۔
<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-اور-update pattern کے لیے ایک آسان shorthand۔
<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 ہر control type کے لیے صحیح property/event منتخب کرتا ہے (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" -->
یہ آپ کو reusable input components بنانے دیتا ہے جو v-model کے ساتھ native inputs جیسے کام کرتے ہیں (Vue 3 متعدد named v-models کو بھی support کرتا ہے: v-model:title، v-model:body)۔
v-model Vue میں forms کا بنیادی پتھر ہے — یہ دو طرفہ data flow کے لیے manual value-binding + event-handling boilerplate کو ختم کر دیتا ہے۔
یہ سمجھنا کہ یہ :value + @input میں desugars ہوتا ہے اسے سادہ بناتا ہے اور وضاحت کرتا ہے کہ اپنے components پر v-model کو کیسے implement کریں، جبکہ modifiers (.trim/.number/.lazy) عام input-processing کی ضروریات کو declaratively سنبھالتے ہیں۔