Suggest an edit

Improve this article

Refine the answer for “What is v-model used for?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`v-model` is a Vue directive for **two-way data binding**.
It links a value in the template (input, select, textarea, component) to a variable in the state, so that **updating the value in the DOM changes the data**, and **updating the data changes the DOM**.

In simple terms:

> `v-model` **automatically synchronizes the data and the interface.**

---

## How `v-model` works (using an input as an example)

```html
<input v-model="name">
```

This is **syntactic sugar** for:

```html
<input
  :value="name"
  @input="name = $event.target.value"
/>
```

In other words, Vue does `v-bind` + `v-on` itself.

---

## Support for different form elements

### Text inputs

```html
<input v-model="text">
```

### Checkbox

```html
<input type="checkbox" v-model="checked">
```

### Radio buttons

```html
<input type="radio" value="A" v-model="choice">
<input type="radio" value="B" v-model="choice">
```

### Select

```html
<select v-model="selected">
  <option value="1">One</option>
</select>
```

### Checkboxes with arrays

```html
<input type="checkbox" value="A" v-model="selectedItems">
```

If the checkbox is checked, `value` is added to the array.
If it's unchecked, the value is removed.

---

## v-model modifiers

#### `.trim`

Automatically trims whitespace at the edges

```html
<input v-model.trim="name">
```

#### `.number`

Converts the value to a number

```html
<input v-model.number="age">
```

#### `.lazy`

Fires on `change`, not on `input`

```html
<input v-model.lazy="value">
```

---

## v-model in components (a very important topic)

In Vue 3:

```html
<MyInput v-model="username" />
```

Vue interprets this as:

- passing the `modelValue` prop
- listening for the `update:modelValue` event

Component example:

```vue
<script>
export default {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  >
</template>
```

---

## Named models (Vue 3)

A component can have several `v-model`s:

```html
<DatePicker v-model:start="startDate" v-model:end="endDate" />
```

The component must work with `modelValue` replaced by the argument:

- prop: `start`
- event: `update:start`

---

## How v-model works "under the hood"

Every `v-model` turns into a combination of:

- `v-bind` to pass the value
- `v-on` to update the data

So in effect it is:

```
:prop="value"
@event="value = $event"
```

Markdown · drag & drop images · ⌘B / ⌘I shortcuts332 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.