Ручные привязки ввода формы в Vue.js

При создании форм в Vue.js мы чаще всего используем v-model для привязки ввода формы. v-model позволяет очень легко синхронизировать модель данных со значениями полей нашей формы и наоборот.

Это так называемая двусторонняя привязка.

Однако бывают случаи, когда нам нужно больше контроля над привязкой значения поля, и тогда на помощь приходит ручная привязка.

v-model под капотом

Документация Vue.js дает нам подсказку, как работает v-model под капотом. Она подключает привязки значений и слушателей событий изменения к элементу поля, на котором используется.

Например, <input v-model="text"> переводится как

<input
  :value="text"
  @input="event => text = event.target.value"
>

Вот различные свойства DOM и пары событий для основных элементов формы, которые мы можем использовать для воссоздания двустороннего связывания v-model вручную с помощью v-bind (:) и v-on ( @):

Давайте проверим, как это выглядит в реальном коде

Примеры ручного связывания

Хотя пример двустороннего связывания ввода формы с помощью v-model есть на сайте документации Vue.js, там нет примера, как создать такое же связывание вручную.

Давайте посмотрим, как можно создать ручные привязки для checkbox и radio, так как они являются наиболее сложными для правильной работы.

В конце этой статьи вы найдете CodeSandbox, который воссоздает пример Vue.js Form Bindings с использованием ручного связывания. Он также включает примеры ручного связывания нескольких флажков и списков выбора.

Флажок

Обычно мы привязываем флажок к значению boolean в нашей модели данных. Вот как это сделать с помощью ручного связывания.

<input
  type="checkbox"
  :checked="booleanValue"
  @change="booleanValue = $event.target.checked"
/>

Ключ здесь в том, чтобы v-bind свойство checked и затем присвоить значение обратно в модель данных, прочитав атрибут checked чекбокса при наступлении события change.

$event — это специальная переменная, которая дает нам доступ к исходному событию DOM внутри встроенного обработчика.

Радио

При привязке радиокнопок мы, скорее всего, будем использовать текстовую переменную для хранения выбранного значения. Ручное связывание работает следующим образом: Мы привязываем свойство checked к результату выражения, которое оценивает, соответствует ли текущее выбранное значение этой конкретной радиокнопке. Мы считываем выбранное значение радиокнопки с помощью события change.

Обратите внимание, что мы используем $event.target.value, поскольку нам нужно фактическое текстовое значение.

<input
  type="radio"
  value="One"
  :checked="textValue === 'One'"
  @change="textValue = $event.target.value"
/>

<input
  type="radio"
  value="Two"
  :checked="textValue === 'Two'"
  @change="textValue = $event.target.value"
/>

Больше примеров…

Вы можете посмотреть CodeSandbox здесь для подробных примеров, которые также демонстрируют, как связать мульти-чекбокс и мульти-селект списки.

Приятно знать, что ручное связывание работает одинаково как в Vue.js 2, так и в Vue.js 3.

Спасибо за прочтение!