Combobox v-combobox

v-combobox в Vuetify представляет собой расширяемый компонент выбора, объединяющий функциональность v-select и текстового поля. Он позволяет пользователю выбирать значения из списка или вводить собственные данные. Это особенно полезно, когда требуется динамическое добавление элементов или фильтрация списка на лету.

Ключевые свойства:

  • v-model — двустороннее связывание выбранного значения.
  • items — массив доступных элементов для выбора. Может быть простым массивом строк или объектов с ключами text и value.
  • multiple — позволяет выбирать несколько элементов одновременно.
  • chips — отображает выбранные элементы в виде чипов (тегов), удобно при множественном выборе.
  • clearable — добавляет кнопку для очистки значения.
  • filter — функция или булево значение, определяющее фильтрацию списка при вводе текста.
  • allow-overflow — разрешает списку расширяться за пределы контейнера, полезно при работе с динамическими меню.

Работа с динамическими данными

Компонент поддерживает добавление новых значений, которых нет в исходном списке. Для этого используется свойство allow-new:

При вводе текста, которого нет в массиве existingTags, компонент автоматически предложит добавить новое значение. Это удобно для создания интерактивных форм, где пользователь может расширять список опций.

Фильтрация и поиск

По умолчанию v-combobox фильтрует элементы в списке на основе введённого текста. Для более точного управления можно использовать свойство filter с функцией:

Особенности фильтрации:

  • queryText — текущий текст в поле ввода.
  • itemText — текст элемента списка, который проверяется.
  • item — сам объект элемента из массива items, что позволяет фильтровать по любому ключу объекта.

Работа с объектами вместо строк

Когда элементы списка являются объектами, следует указывать ключи для отображения и значения через свойства item-text и item-value:

Такой подход упрощает работу с API, где объекты имеют сложную структуру, и позволяет использовать v-combobox как полноценный элемент управления данными.

Множественный выбор и чипы

При работе с множественным выбором рекомендуется использовать chips для визуализации выбранных элементов. В комбинации с multiple это создаёт удобный интерфейс:

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

Настройка стилей и состояния

v-combobox поддерживает стандартные свойства Vuetify для визуального оформления:

  • dense — уменьшенный размер поля.
  • outlined — контурная рамка.
  • filled — заливка фона.
  • loading — индикатор загрузки данных.
  • error и error-messages — отображение ошибок валидации.
  • disabled — блокировка ввода.

Пример комбинированного оформления:

События v-combobox

Для динамической реакции на действия пользователя доступны события:

  • @input — срабатывает при изменении выбранного значения.
  • @change — срабатывает после завершения изменения значения.
  • @update:search-input — отслеживает текст в поле ввода для реализации кастомной фильтрации.
  • @focus и @blur — фокус и потеря фокуса.
  • @click:clear — при очистке поля.

Пример использования:

Интеграция с формами

v-combobox легко интегрируется с v-form для валидации и управления данными:


  
  Отправить

v-combobox автоматически учитывает правила валидации и корректно взаимодействует с формой, что делает его идеальным элементом для интерактивных интерфейсов.

Оглавление