v-model ફોર્મ ઇનપુટ અને રાજ્યના ભાગ વચ્ચે બે-દિશાના બંધન બનાવે છે: ઇનપુટ રાજ્યનું મૂલ્ય દર્શાવે છે, અને ઇનપુટમાં સંપાદન રાજ્યને અપડેટ કરે છે — આપોઆપ, બંને દિશાઓમાં.
<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>
પર્દેપશ્ચાતે, બંધન અને શ્રોતાને જોડે છે:
v-model:value@input<!-- these two are equivalent -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
તેથી તે જાદુ નથી — માત્ર બંધન-અને-અપડેટ પેટર્ન માટે એક અનુકૂળ શોર્ટહેન્ડ.
<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 પ્રત્યેક નિયંત્રણ પ્રકાર માટે યોગ્ય મિલકત/ઇવેન્ટ પસંદ કરે છે (મૂલ્ય/ઇનપુટ, તપાસ્યું/બદલાવ, વગેરે).
<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" -->
આ તમને પુનઃપ્રયોજ્ય ઇનપુટ ઘટકો બનાવવા દেય છે જે v-model સાથે જેમ તે મૂળ ઇનપુટ્સ જેવું કાર્ય કરે (Vue 3 એક્સ્ એક્સ્ બહુવિધ નામાંકિત v-models: v-model:title, v-model:body ને પણ સમર્થન આપે છે).
v-model Vue માં ફોર્મ્સનો ખૂણા પત્થર છે — તે બે-દિશાના ડેટા પ્રવાહ માટે મેન્યુઅલ મૂલ્ય-બંધન + ઇવેન્ટ-હેન્ડલિંગ બોઇલરપ્લેટ સમાપ્ત કરે છે.
વિચાર કર્યું કે તે :value + @input માં વિસર્જિત થાય છે તે તેને રહસ્યમય બનાવતું નથી અને તમારા પોતાના ઘટકો પર v-model કેવી રીતે લાગુ કરવું તે સમજાવે છે, જ્યારે મોડિફાયર્સ (.trim/.number/.lazy) સામાન્ય ઇનપુટ-પ્રોસેસિંગ જરૂરીયાતોને ઘોષણાત્મક રીતે હેન્ડલ કરે છે.