Текстовые поля v-text-field

Компонент v-text-field — один из базовых элементов ввода данных в библиотеке Vuetify. Он используется для получения текстовой информации от пользователя: строк, чисел, email-адресов, паролей и других типов данных. Компонент построен поверх стандартного HTML-элемента <input>, но дополняется мощной системой стилизации, валидации, реактивности и взаимодействия с другими элементами интерфейса.

v-text-field входит в систему компонентов форм Vuetify и тесно интегрирован с такими компонентами, как:

v-form
v-textarea
v-select
v-autocomplete

Благодаря этому создаётся единая экосистема элементов ввода с единым поведением, стилями и логикой валидации.

Базовое использование

Самый простой вариант использования v-text-field — создание поля для ввода текста.

<template>
  <v-text-field label="Имя"></v-text-field>
</template>

Компонент автоматически создаёт:

текстовое поле
подпись (label)
анимацию перемещения label при фокусе
встроенные стили Material Design

Привязка данных через `v-model`

Наиболее распространённый способ работы с v-text-field — двусторонняя привязка данных через v-model.

Это позволяет автоматически синхронизировать значение поля с переменной состояния Vue.

<template>
  <v-text-field
    v-model="username"
    label="Имя пользователя"
  ></v-text-field>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}
</script>

В данном случае:

значение поля хранится в username
любое изменение поля обновляет переменную
изменение переменной обновляет поле

Основные свойства компонента

`label`

Определяет текст подписи поля.

<v-text-field label="Email"></v-text-field>

Label автоматически:

располагается внутри поля
перемещается вверх при фокусе
остаётся в верхнем положении при наличии значения

`placeholder`

Отображает текст-подсказку внутри поля.

<v-text-field
  label="Телефон"
  placeholder="+7 (___) ___-__-__"
></v-text-field>

placeholder исчезает при вводе текста.

`hint`

Позволяет добавить поясняющий текст под полем.

<v-text-field
  label="Пароль"
  hint="Минимум 8 символов"
></v-text-field>

По умолчанию hint отображается только при фокусе.

Для постоянного отображения используется persistent-hint.

<v-text-field
  label="Пароль"
  hint="Минимум 8 символов"
  persistent-hint
></v-text-field>

`type`

Определяет тип HTML-ввода.

<v-text-field
  label="Email"
  type="email"
></v-text-field>

Поддерживаемые типы:

text
password
email
number
tel
url
search

Пример поля для пароля:

<v-text-field
  label="Пароль"
  type="password"
></v-text-field>

Валидация данных

v-text-field поддерживает встроенную систему правил (rules).

Правила представляют собой массив функций, возвращающих:

true — если значение корректно
строку с ошибкой — если значение некорректно

Пример:

<v-text-field
  v-model="email"
  label="Email"
  :rules="emailRules"
></v-text-field>

data() {
  return {
    email: '',
    emailRules: [
      v => !!v || 'Поле обязательно',
      v => /.+@.+\..+/.test(v) || 'Неверный email'
    ]
  }
}

Возможности системы правил:

несколько правил
кастомные сообщения
динамическая логика проверки

Обязательное поле

Для обозначения обязательного поля обычно используется правило:

v => !!v || 'Поле обязательно'

Пример:

<v-text-field
  label="Имя"
  v-model="name"
  :rules="[v => !!v || 'Введите имя']"
></v-text-field>

Отображение ошибок

Если правило возвращает строку, компонент автоматически:

подсвечивает поле красным
отображает сообщение ошибки
блокирует отправку формы (если используется v-form)

Пример визуального поведения:

красная рамка
текст ошибки под полем
изменение цвета label

Работа с формами (`v-form`)

v-text-field часто используется внутри v-form.

<v-form ref="form">
  <v-text-field
    v-model="email"
    label="Email"
    :rules="emailRules"
  ></v-text-field>
</v-form>

Проверка всей формы:

this.$refs.form.validate()

Методы формы:

Метод	Назначение
`validate()`	проверяет все поля
`reset()`	очищает значения
`resetValidation()`	сбрасывает ошибки

Иконки внутри поля

v-text-field поддерживает иконки.

Иконка слева (`prepend-icon`)

<v-text-field
  label="Поиск"
  prepend-icon="mdi-magnify"
></v-text-field>

Иконка справа (`append-icon`)

<v-text-field
  label="Email"
  append-icon="mdi-email"
></v-text-field>

Иконки внутри поля

Vuetify также поддерживает внутренние иконки.

<v-text-field
  label="Поиск"
  prepend-inner-icon="mdi-magnify"
></v-text-field>

Обработка событий

Компонент генерирует стандартные события.

`input`

Срабатывает при изменении значения.

<v-text-field
  @input="onInput"
></v-text-field>

`change`

Срабатывает при потере фокуса после изменения.

<v-text-field
  @change="onChange"
></v-text-field>

`focus`

Срабатывает при получении фокуса.

<v-text-field
  @focus="onFocus"
></v-text-field>

`blur`

Срабатывает при потере фокуса.

<v-text-field
  @blur="onBlur"
></v-text-field>

Отключение поля

Для блокировки редактирования используется свойство disabled.

<v-text-field
  label="ID пользователя"
  disabled
></v-text-field>

Особенности:

поле нельзя изменить
значение отображается
стили изменяются на неактивные

Режим только для чтения

Если значение должно отображаться, но не редактироваться, используется readonly.

<v-text-field
  label="ID"
  value="12345"
  readonly
></v-text-field>

Разница:

Свойство	Поведение
`disabled`	поле полностью неактивно
`readonly`	поле активно, но текст нельзя изменить

Очистка поля

Vuetify поддерживает кнопку очистки.

<v-text-field
  v-model="search"
  label="Поиск"
  clearable
></v-text-field>

При активации:

появляется иконка очистки
при нажатии значение сбрасывается

Счётчик символов

Для ограничения длины ввода используется counter.

<v-text-field
  label="Комментарий"
  counter="50"
></v-text-field>

Это отображает количество введённых символов.

Для реального ограничения используется maxlength.

<v-text-field
  label="Комментарий"
  counter
  maxlength="50"
></v-text-field>

Стилизация компонента

Vuetify предлагает несколько вариантов отображения поля.

`outlined`

Поле с рамкой.

<v-text-field
  label="Имя"
  outlined
></v-text-field>

Особенности:

чёткая граница
современный внешний вид
часто используется в формах

`filled`

Поле с заливкой фона.

<v-text-field
  label="Имя"
  filled
></v-text-field>

`solo`

Поле без внешних границ.

<v-text-field
  label="Поиск"
  solo
></v-text-field>

`solo-inverted`

Инвертированный вариант solo.

<v-text-field
  label="Поиск"
  solo-inverted
></v-text-field>

Цвета компонента

Свойство color управляет цветом активного состояния.

<v-text-field
  label="Имя"
  color="purple"
></v-text-field>

Цвет применяется к:

рамке
label
индикатору фокуса

Плотность (`dense`)

Для компактного интерфейса используется dense.

<v-text-field
  label="Имя"
  dense
></v-text-field>

Эффект:

уменьшенная высота
меньше внутренних отступов

Скрытие деталей

По умолчанию под полем отображается зона сообщений:

ошибки
подсказки
счётчик

Её можно скрыть.

<v-text-field
  label="Имя"
  hide-details
></v-text-field>

Маски ввода

Для форматированного ввода используется v-mask (через сторонние плагины).

Пример маски телефона:

<v-text-field
  v-mask="'+7 (###) ###-##-##'"
  label="Телефон"
></v-text-field>

Маска автоматически:

ограничивает ввод
форматирует данные

Работа с числовыми значениями

При использовании type="number" компонент работает с числовыми данными.

<v-text-field
  label="Возраст"
  type="number"
></v-text-field>

Дополнительные атрибуты:

<v-text-field
  label="Количество"
  type="number"
  min="1"
  max="10"
></v-text-field>

Программное управление полем

Через ref можно управлять компонентом.

<v-text-field
  ref="nameField"
  label="Имя"
></v-text-field>

Фокус программно:

this.$refs.nameField.focus()

Динамическое управление свойствами

Свойства компонента можно изменять реактивно.

<v-text-field
  :disabled="isLoading"
  label="Email"
></v-text-field>

Пример состояния загрузки:

data() {
  return {
    isLoading: false
  }
}

Пример полноценной формы

<v-form ref="form">
  <v-text-field
    v-model="name"
    label="Имя"
    :rules="[v => !!v || 'Введите имя']"
  ></v-text-field>

  <v-text-field
    v-model="email"
    label="Email"
    type="email"
    :rules="emailRules"
  ></v-text-field>

  <v-text-field
    v-model="password"
    label="Пароль"
    type="password"
    counter="20"
  ></v-text-field>
</v-form>

Такой подход позволяет:

централизованно управлять формой
автоматически проверять поля
отображать ошибки
поддерживать реактивное обновление интерфейса.

Компонент v-text-field остаётся фундаментальным элементом интерфейсов на Vuetify благодаря гибкости, богатому набору настроек и полной интеграции с системой форм Vue.

Текстовые поля v-text-field

Базовое использование

Привязка данных через v-model

Основные свойства компонента

label

placeholder

hint

type

Валидация данных

Обязательное поле

Отображение ошибок

Работа с формами (v-form)

Иконки внутри поля

Иконка слева (prepend-icon)

Иконка справа (append-icon)

Иконки внутри поля

Обработка событий

input

change

focus

blur

Отключение поля

Режим только для чтения

Очистка поля

Счётчик символов

Стилизация компонента

outlined

filled

solo

solo-inverted

Цвета компонента

Плотность (dense)

Скрытие деталей

Маски ввода

Работа с числовыми значениями

Программное управление полем

Динамическое управление свойствами

Пример полноценной формы

Привязка данных через `v-model`

`label`

`placeholder`

`hint`

`type`

Работа с формами (`v-form`)

Иконка слева (`prepend-icon`)

Иконка справа (`append-icon`)

`input`

`change`

`focus`

`blur`

`outlined`

`filled`

`solo`

`solo-inverted`

Плотность (`dense`)