v-model joħloq doppja direzzjoni ta' binding bejn input ta' formola u parti ta' stat: l-input juri l-valur tal-istat, u t-taħrif tal-input aġġorna l-istat — awtomatikament, fit-tnejn id-direzzjonijiet.
<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>
Taħt il-kapu, jikkombina binding u listener :
v-model:value@input<!-- these two are equivalent -->
<input v-model="name" />
<input :value="name" @input="name = $event.target.value" />
Dunqu mhux maġija — biss shorthand konvenjenti għall-mudell 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 jagħżel il-proprieta/avveniment it-tajba għal kull tip ta' kontroll (value/input, checked/change, eċċ).
<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" -->
Dan jippermettilek tibni komponenti input li jistgħu jintużaw mill-ġdid li jaħdmu ma' v-model biss bħal inputs nativi (Vue 3 saħansitra jappoġġja multiple named v-models: v-model:title, v-model:body).
v-model hija l-bażi tal-formoli f'Vue — telimina l-boilerplate tal-binding tal-valur manwali + għodda ta' avveniment għall-fluss ta' data doppja direzzjoni.
Il-fehim li desugars għal :value + @input jidelucida u jispiega kif testimplimenta v-model fuq il-komponenti tiegħek stess, billi l-modifikaturi (.trim/.number/.lazy) jittrattaw il-bżonnijiet tas-soluzzjoni input komuni b'mod deklarattiv.