Чекбоксы v-checkbox

v-checkbox — это компонент пользовательского интерфейса библиотеки Vuetify, предназначенный для выбора одного или нескольких значений из набора вариантов. Он реализует стандартный элемент формы «флажок», однако расширяет его функциональность за счёт интеграции с системой реактивности Vue, поддержки темизации Material Design и большого количества дополнительных параметров.

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

Основные характеристики компонента:

  • поддержка одиночного и множественного выбора
  • интеграция с v-model
  • возможность работы с массивами значений
  • гибкая настройка внешнего вида
  • встроенная валидация
  • поддержка индетерминированного состояния
  • интеграция с системой тем Vuetify

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

Минимальный пример чекбокса включает только привязку значения через v-model.

<template>
  <v-checkbox
    v-model="checked"
    label="Согласен с условиями"
  ></v-checkbox>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

Значение checked принимает булево состояние:

  • true — чекбокс установлен
  • false — чекбокс снят

При изменении состояния пользовательского интерфейса значение автоматически обновляется благодаря механизму реактивности Vue.

Использование label

Текстовая подпись чекбокса задаётся через свойство label.

<v-checkbox
  v-model="notifications"
  label="Получать уведомления"
/>

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

  • подпись располагается справа от чекбокса
  • текст кликабелен и изменяет состояние
  • допускается использование HTML-разметки

Пример с HTML:

<v-checkbox v-model="accept">
  <template v-slot:label>
    Я принимаю <a href="#">условия использования</a>
  </template>
</v-checkbox>

Несколько чекбоксов и массив значений

Чекбоксы часто используются для выбора нескольких элементов из списка. В этом случае v-model связывается с массивом.

<template>
  <div>
    <v-checkbox
      v-model="selected"
      label="JavaScript"
      value="js"
    />

    <v-checkbox
      v-model="selected"
      label="Python"
      value="python"
    />

    <v-checkbox
      v-model="selected"
      label="Go"
      value="go"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: []
    }
  }
}
</script>

Механизм работы:

  • при установке чекбокса значение добавляется в массив
  • при снятии — удаляется

Пример состояния массива:

selected = ["js", "python"]

Пользовательские значения true-value и false-value

По умолчанию чекбокс возвращает true или false. Однако можно задать собственные значения.

<v-checkbox
  v-model="status"
  label="Активен"
  true-value="enabled"
  false-value="disabled"
/>

Теперь состояние будет выглядеть так:

status = "enabled"

или

status = "disabled"

Это удобно при работе с API или при хранении данных в базе.

Свойство disabled

Свойство disabled блокирует возможность изменения состояния чекбокса.

<v-checkbox
  v-model="active"
  label="Активная опция"
  disabled
/>

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

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

Свойство readonly

В отличие от disabled, readonly запрещает изменение состояния, но сохраняет обычный визуальный стиль.

<v-checkbox
  v-model="value"
  label="Только чтение"
  readonly
/>

Отличия:

Свойство Возможность изменения Внешний вид
disabled запрещено приглушённый
readonly запрещено обычный

Индетерминированное состояние

v-checkbox поддерживает промежуточное состояние — indeterminate. Оно используется, когда невозможно однозначно определить выбор.

Типичный пример — чекбокс «Выбрать всё» в списке.

<v-checkbox
  v-model="all"
  :indeterminate="isIndeterminate"
  label="Выбрать все"
/>

Это состояние:

  • отображается как горизонтальная линия
  • указывает на частичный выбор
  • не является отдельным логическим значением

Пример вычисления состояния:

computed: {
  isIndeterminate() {
    return this.selected.length > 0 &&
           this.selected.length < this.items.length
  }
}

Изменение цвета чекбокса

Vuetify поддерживает систему тем Material Design, позволяющую задавать цвет элементов.

<v-checkbox
  v-model="value"
  label="Основной цвет"
  color="primary"
/>

Примеры цветов:

  • primary
  • secondary
  • success
  • error
  • warning
  • info

Можно использовать и пользовательские цвета:

<v-checkbox
  v-model="value"
  color="purple"
/>

Плотный режим (dense)

Свойство dense уменьшает вертикальные отступы компонента.

<v-checkbox
  v-model="value"
  label="Компактный вариант"
  dense
/>

Используется:

  • в таблицах
  • в длинных списках
  • в компактных интерфейсах

Размещение чекбокса слева от текста

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

<v-checkbox
  v-model="value"
  label="Текст слева"
  reverse
/>

Свойство reverse меняет порядок элементов:

Текст   [checkbox]

Использование внутри форм

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

<v-form ref="form">
  <v-checkbox
    v-model="agreement"
    label="Я принимаю условия"
    :rules="[v => !!v || 'Необходимо согласие']"
  />
</v-form>

Если чекбокс не установлен, правило валидации возвращает сообщение об ошибке.

Правила валидации

Свойство rules принимает массив функций проверки.

<v-checkbox
  v-model="terms"
  label="Принять условия"
  :rules="rules"
/>
data() {
  return {
    rules: [
      v => !!v || 'Необходимо подтвердить'
    ]
  }
}

Правила выполняются:

  • при изменении значения
  • при вызове form.validate()

Слот label

Для сложных подписей используется слот label.

<v-checkbox v-model="accept">
  <template v-slot:label>
    Я согласен с
    <strong>политикой конфиденциальности</strong>
  </template>
</v-checkbox>

Преимущества:

  • поддержка HTML
  • возможность вставки компонентов
  • гибкое форматирование текста

Группировка чекбоксов

Несколько чекбоксов удобно объединять в логические группы.

<div>
  <h3>Навыки</h3>

  <v-checkbox
    v-model="skills"
    label="JavaScript"
    value="js"
  />

  <v-checkbox
    v-model="skills"
    label="Vue"
    value="vue"
  />

  <v-checkbox
    v-model="skills"
    label="Node.js"
    value="node"
  />
</div>

Результат:

skills = ["js", "vue"]

Использование в динамических списках

Чекбоксы часто создаются динамически с помощью v-for.

<v-checkbox
  v-for="item in items"
  :key="item.id"
  v-model="selected"
  :label="item.name"
  :value="item.id"
/>

Пример данных:

items: [
  { id: 1, name: "Фильмы" },
  { id: 2, name: "Музыка" },
  { id: 3, name: "Книги" }
]

После выбора:

selected = [1, 3]

События компонента

Основные события:

input

Вызывается при изменении значения.

<v-checkbox
  v-model="value"
  @input="onChange"
/>

change

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

<v-checkbox
  v-model="value"
  @change="onChanged"
/>

Использование с объектами

Иногда требуется работать не со строками, а с объектами.

<v-checkbox
  v-model="selected"
  :value="item"
  :label="item.name"
/>

В этом случае массив содержит сами объекты:

selected = [
  { id: 1, name: "JavaScript" }
]

Производительность при больших списках

При работе с десятками и сотнями чекбоксов рекомендуется:

  • использовать v-for с уникальным key
  • минимизировать вычисляемые свойства
  • при необходимости применять виртуализацию списков

Большое количество реактивных чекбоксов может создавать значительную нагрузку на систему реактивности Vue.

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

Свойство Назначение
v-model двусторонняя привязка
label текст подписи
value значение чекбокса
color цвет
disabled блокировка
readonly режим чтения
dense компактный режим
indeterminate промежуточное состояние
rules правила валидации
true-value значение при установке
false-value значение при снятии

Типичные сценарии использования

Наиболее распространённые области применения v-checkbox:

Формы регистрации

  • согласие с правилами
  • подписка на рассылку

Фильтрация данных

  • выбор категорий
  • включение параметров поиска

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

  • включение или отключение функций
  • персонализация интерфейса

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

  • списки интересов
  • выбор разрешений
  • набор тегов

Благодаря гибкой системе параметров и полной интеграции с Vue компонент v-checkbox позволяет реализовывать сложные пользовательские интерфейсы без создания собственных элементов управления.

Оглавление