Поля форм: v-model

Директива v-model связывает поле формы с переменной в обе стороны: пользователь печатает — переменная меняется, переменная меняется в коде — поле показывает новое значение. Не нужно вручную читать input.value в обработчике.

Текстовое поле

<!-- src/App.vue -->
<script setup>
import { ref } from 'vue'
 
const newTodo = ref('')
</script>
 
<template>
  <input v-model="newTodo" placeholder="Что нужно сделать?">
  <p>Вы вводите: {{ newTodo }}</p>
</template>

Текст под полем повторяет всё, что вы печатаете, буква за буквой. v-model — сокращение для пары :value="newTodo" и @input="newTodo = $event.target.value".

Форма добавления задачи

Соединим v-model с событием отправки формы:

<!-- src/App.vue -->
<script setup>
import { ref } from 'vue'
 
const todos = ref([])
const newTodo = ref('')
let nextId = 1
 
function addTodo() {
  const text = newTodo.value.trim()
  if (text === '') return
  todos.value.push({ id: nextId++, text, done: false })
  newTodo.value = ''
}
</script>
 
<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" placeholder="Что нужно сделать?">
    <button>Добавить</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
  </ul>
</template>

Введите «Купить хлеб» и нажмите Enter или кнопку — задача появится в списке, а поле очистится, потому что код записал в newTodo пустую строку.

Флажок

Для checkbox переменная получает true или false:

<template>
  <li v-for="todo in todos" :key="todo.id">
    <label>
      <input type="checkbox" v-model="todo.done">
      {{ todo.text }}
    </label>
  </li>
</template>

Отметка флажка сразу меняет поле done у задачи — счётчик оставшихся задач на computed тоже обновится.

Другие поля

Поле	Значение переменной
`input`, `textarea`	Строка
`input type="checkbox"`	`true` или `false`
Несколько `checkbox` с одним массивом	Массив значений отмеченных
`input type="radio"`	Значение `value` выбранного
`select`	Значение `value` выбранного `option`

<script setup>
import { ref } from 'vue'
 
const filter = ref('all')
</script>
 
<template>
  <select v-model="filter">
    <option value="all">Все</option>
    <option value="active">Активные</option>
    <option value="done">Выполненные</option>
  </select>
  <p>Фильтр: {{ filter }}</p>
</template>

При выборе пункта под списком появится его значение, например «Фильтр: active».

Модификаторы

Модификатор	Что делает
`v-model.trim`	Убирает пробелы по краям
`v-model.number`	Превращает ввод в число
`v-model.lazy`	Обновляет переменную при потере фокуса, а не на каждый символ

Частая ошибка

Указать у поля и v-model, и value:

<input v-model="newTodo" value="Новая задача">

v-model игнорирует атрибут value, checked и selected — начальное значение берётся только из переменной. Задайте его в скрипте: const newTodo = ref('Новая задача').

Спасибо, что читаете!