Радиокнопки v-radio

v-radio — элемент выбора из группы, позволяющий отметить только один вариант из нескольких. В интерфейсах он применяется в ситуациях, когда необходимо обеспечить взаимоисключающий выбор. Радиокнопки в Vuetify работают в составе контейнера v-radio-group, который управляет состоянием выбранного значения.

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

Базовая структура радиокнопок

Минимальная конфигурация включает контейнер v-radio-group и несколько элементов v-radio.

<template>
  <v-radio-group v-model="choice">
    <v-radio label="Первый вариант" value="one"></v-radio>
    <v-radio label="Второй вариант" value="two"></v-radio>
    <v-radio label="Третий вариант" value="three"></v-radio>
  </v-radio-group>
</template>

<script>
export default {
  data() {
    return {
      choice: null
    }
  }
}
</script>

Ключевые элементы:

Свойство Описание
v-radio-group Контейнер для радиокнопок
v-model Переменная состояния выбранного значения
label Текстовое описание варианта
value Значение, присваиваемое при выборе

После выбора одного из вариантов переменная choice будет содержать соответствующее значение.

Связь с v-model

v-radio-group использует двустороннюю привязку данных.

<v-radio-group v-model="gender">
  <v-radio label="Мужской" value="male"></v-radio>
  <v-radio label="Женский" value="female"></v-radio>
</v-radio-group>
data() {
  return {
    gender: "male"
  }
}

В этом случае радиокнопка “Мужской” будет выбрана по умолчанию.

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

  1. v-model хранит текущее значение.
  2. При выборе радиокнопки её value записывается в переменную.
  3. При изменении переменной интерфейс автоматически обновляется.

Свойства компонента v-radio

label

Отображает подпись рядом с радиокнопкой.

<v-radio label="Вариант выбора"></v-radio>

value

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

<v-radio label="Пункт A" value="A"></v-radio>

Значением может быть:

  • строка
  • число
  • объект
  • булево значение

disabled

Отключает возможность выбора.

<v-radio
  label="Недоступный вариант"
  value="disabled"
  disabled
></v-radio>

Такой элемент отображается в интерфейсе, но пользователь не может его выбрать.

color

Позволяет изменить цвет активного состояния.

<v-radio
  label="Зелёный вариант"
  value="green"
  color="green"
></v-radio>

Поддерживаются цвета из системы тем Vuetify:

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

Свойства v-radio-group

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

column

Отображает элементы вертикально (по умолчанию).

<v-radio-group v-model="option" column>

row

Горизонтальное расположение радиокнопок.

<v-radio-group v-model="option" row>
  <v-radio label="A" value="a"></v-radio>
  <v-radio label="B" value="b"></v-radio>
</v-radio-group>

Используется для компактных интерфейсов.

mandatory

Запрещает отсутствие выбранного значения.

<v-radio-group v-model="type" mandatory>

Если свойство включено:

  • хотя бы один элемент всегда выбран
  • снять выбор полностью невозможно

disabled

Блокирует всю группу.

<v-radio-group v-model="option" disabled>

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

name

Используется для интеграции с HTML-формами.

<v-radio-group v-model="plan" name="subscription">

Позволяет корректно отправлять данные формы на сервер.

Метки и заголовки группы

Контейнер v-radio-group поддерживает собственную подпись.

<v-radio-group
  v-model="payment"
  label="Способ оплаты"
>
  <v-radio label="Карта" value="card"></v-radio>
  <v-radio label="Наличные" value="cash"></v-radio>
</v-radio-group>

Заголовок отображается над группой элементов.

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

Компонент поддерживает кастомное содержимое.

<v-radio-group v-model="delivery">
  <v-radio value="standard">
    <template v-slot:label>
      <strong>Стандартная доставка</strong>
    </template>
  </v-radio>

  <v-radio value="express">
    <template v-slot:label>
      <strong>Экспресс доставка</strong>
    </template>
  </v-radio>
</v-radio-group>

Это позволяет:

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

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

Радиокнопки могут использовать сложные структуры данных.

<v-radio-group v-model="selectedUser">
  <v-radio
    v-for="user in users"
    :key="user.id"
    :label="user.name"
    :value="user"
  ></v-radio>
</v-radio-group>
data() {
  return {
    selectedUser: null,
    users: [
      { id: 1, name: "Алексей" },
      { id: 2, name: "Мария" },
      { id: 3, name: "Игорь" }
    ]
  }
}

После выбора переменная selectedUser будет содержать весь объект пользователя.

Генерация радиокнопок через v-for

Часто варианты выбора формируются из массива данных.

<v-radio-group v-model="selected">
  <v-radio
    v-for="item in items"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  ></v-radio>
</v-radio-group>
data() {
  return {
    selected: null,
    items: [
      { label: "HTML", value: "html" },
      { label: "CSS", value: "css" },
      { label: "JavaScript", value: "js" }
    ]
  }
}

Такой подход:

  • делает код компактнее
  • упрощает обновление данных
  • облегчает масштабирование интерфейса

Валидация

v-radio-group поддерживает систему правил (rules), аналогичную другим компонентам форм.

<v-radio-group
  v-model="answer"
  :rules="[v => !!v || 'Выберите вариант']"
>
  <v-radio label="Да" value="yes"></v-radio>
  <v-radio label="Нет" value="no"></v-radio>
</v-radio-group>

Если значение не выбрано, отображается сообщение об ошибке.

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

Радиокнопки часто применяются вместе с компонентом v-form.

<v-form ref="form">
  <v-radio-group
    v-model="subscription"
    :rules="[v => !!v || 'Выберите тип подписки']"
  >
    <v-radio label="Базовая" value="basic"></v-radio>
    <v-radio label="Премиум" value="premium"></v-radio>
  </v-radio-group>

  <v-btn @click="submit">Отправить</v-btn>
</v-form>
methods: {
  submit() {
    this.$refs.form.validate()
  }
}

Валидация будет проверять выбран ли вариант.

Стилизация и плотность элементов

Vuetify предоставляет несколько параметров визуальной настройки.

density

Уменьшает расстояния между элементами.

<v-radio-group v-model="value" density="compact">

class и style

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

<v-radio
  label="Стилизованный вариант"
  value="custom"
  class="my-radio"
/>

Реакция на изменение значения

Изменения можно отслеживать через событие change.

<v-radio-group
  v-model="theme"
  @change="themeChanged"
>
  <v-radio label="Светлая" value="light"></v-radio>
  <v-radio label="Тёмная" value="dark"></v-radio>
</v-radio-group>
methods: {
  themeChanged(value) {
    console.log("Новая тема:", value)
  }
}

Практический пример интерфейса

Форма выбора способа доставки.

<v-radio-group
  v-model="deliveryMethod"
  label="Способ доставки"
  column
>
  <v-radio
    label="Самовывоз"
    value="pickup"
  ></v-radio>

  <v-radio
    label="Курьер"
    value="courier"
  ></v-radio>

  <v-radio
    label="Почта"
    value="mail"
  ></v-radio>
</v-radio-group>
data() {
  return {
    deliveryMethod: "pickup"
  }
}

Интерфейс автоматически:

  • выделяет выбранный вариант
  • обновляет значение состояния
  • синхронизирует данные с формой

Типичные сценарии применения

Радиокнопки используются для выбора одного варианта из фиксированного списка:

Выбор параметров:

  • пол
  • язык интерфейса
  • валюта
  • тема оформления

Настройки:

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

Опросы и формы:

  • анкеты
  • тесты
  • опросники

Особенности работы

  1. v-radio почти всегда используется внутри v-radio-group.
  2. Управление состоянием происходит через v-model.
  3. В группе одновременно активен только один элемент.
  4. Радиокнопки легко генерируются из массивов данных.
  5. Компонент полностью интегрирован с системой форм и валидации Vuetify.

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

Оглавление