v-model

Use variable which are on the data method or in props.

Resources

• v-model - Vue 3 syntax

Single

See Using v-model on Components in the docs.

HTML tags

<input v-model="searchText" />

Equivalent to:

<input :value="searchText" @input="searchText = $event.target.value" />

Custom component

<CustomInput v-model="searchText" />

Equivalent to:

<CustomInput :model-value="searchText" @update:model-value="searchText = $event" />

Multiple bindings

You can only the v-model property once, but here is how to pass multiple values.

This is for Vue 3 only, according to migration guide.

Based on Multiple v-model bindings in the Vue 3 docs:

<MyComponent v-model:first-name="firstName" v-model:last-name="lastName"
/>

Modifiers

• Modifiers in the Vue 3 docs.

v-model has built-in modifiers:

Lazy

Sync on change event rather than input.

<input v-model.lazy="msg" />

Number

Cast a value to a number

<input v-model.number="age" type="number" />

Trim

Remove whitespace on both ends.

<input v-model.trim="msg" />

Long vs shorthand

From v-model migration doc.

Vue 3

Using this:

<ChildComponent v-model:title="pageTitle" />

Is equivalent to the long form:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

Vue 2

Use this:

<ChildComponent v-model="pageTitle" />

Is equivalent to the long form:

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />