QCheckbox и QRadio

QCheckbox — это компонент библиотеки Quasar, предназначенный для создания чекбоксов с полной интеграцией в реактивную модель Vue.js. Он позволяет связывать состояние с переменной, управлять внешним видом, обрабатывать события и интегрироваться с формами.

Связывание с данными

Основное свойство для работы с состоянием чекбокса — v-model. Оно связывает переменную с состоянием галочки:

<template>
  <q-checkbox v-model="checked" label="Выбрать опцию"></q-checkbox>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    };
  }
};
</script>
  • checked принимает булево значение (true/false) для одиночного чекбокса.
  • Для множественного выбора можно использовать массив:
<q-checkbox v-model="selectedOptions" val="option1" label="Опция 1"></q-checkbox>
<q-checkbox v-model="selectedOptions" val="option2" label="Опция 2"></q-checkbox>

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

Настройка внешнего вида

QCheckbox поддерживает множество визуальных модификаторов:

  • color — задаёт цвет галочки и рамки при активном состоянии.
  • dense — уменьшенный размер для компактного интерфейса.
  • disable — делает чекбокс неактивным.
  • keep-color — сохраняет цвет при отключении.
<q-checkbox v-model="checked" label="Активная опция" color="primary" dense></q-checkbox>
<q-checkbox v-model="checked" label="Неактивная опция" disable></q-checkbox>

События

  • @update:model-value — срабатывает при изменении состояния чекбокса.
  • @input — событие ввода, аналогично v-model для двусторонней привязки.
<q-checkbox
  v-model="checked"
  label="Отслеживание события"
  @update:model-value="onChange"
/>

<script>
export default {
  data() {
    return { checked: false };
  },
  methods: {
    onChange(val) {
      console.log('Состояние чекбокса:', val);
    }
  }
};
</script>

QRadio

QRadio используется для выбора одного варианта из группы. Он полностью совместим с реактивной системой Vue и позволяет создавать управляемые формы.

Связывание с данными

Для радиокнопок v-model связывается с переменной, принимающей значение выбранного элемента:

<q-radio v-model="selectedOption" val="1" label="Вариант 1"></q-radio>
<q-radio v-model="selectedOption" val="2" label="Вариант 2"></q-radio>

<script>
export default {
  data() {
    return { selectedOption: null };
  }
};
</script>
  • val определяет значение, которое будет присвоено переменной при выборе конкретного радио.
  • Все радиокнопки, объединённые одним v-model, образуют группу выбора.

Визуальные модификаторы

  • color — основной цвет при активном выборе.
  • disable — блокировка выбора.
  • dense — уменьшенная компактная версия.
<q-radio v-model="selectedOption" val="1" label="Первый" color="secondary" dense></q-radio>
<q-radio v-model="selectedOption" val="2" label="Второй" disable></q-radio>

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

Оба компонента QCheckbox и QRadio интегрируются с QForm для валидации:

<q-form @submit.prevent="submitForm">
  <q-checkbox v-model="agree" label="Согласен с условиями" :rules="[val => !!val || 'Обязательное поле']"></q-checkbox>
  <q-radio v-model="gender" val="male" label="Мужской" :rules="[val => !!val || 'Выберите пол']"></q-radio>
  <q-btn type="submit" label="Отправить"></q-btn>
</q-form>

<script>
export default {
  data() {
    return { agree: false, gender: null };
  },
  methods: {
    submitForm() {
      console.log('Состояние формы:', this.agree, this.gender);
    }
  }
};
</script>
  • Свойство rules позволяет задавать проверку на уровне компонента.
  • Для чекбоксов можно проверять булево значение, для радио — наличие выбранного val.

Дополнительные возможности

  • Иконки и слоты: можно использовать слоты prepend и append для кастомных иконок и контента.
  • Триггер событий: можно обрабатывать @click для кастомной логики при выборе.
  • Интеграция с массивами: QCheckbox может работать с массивами, что позволяет создавать динамические списки опций.
<q-checkbox
  v-for="item in items"
  :key="item.id"
  v-model="selectedItems"
  :val="item.id"
  :label="item.name"
></q-checkbox>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Опция A' },
        { id: 2, name: 'Опция B' }
      ],
      selectedItems: []
    };
  }
};
</script>

Эти компоненты образуют основу интерактивных форм Quasar. Правильное использование v-model, val, визуальных модификаторов и слотов позволяет создавать гибкие и управляемые интерфейсы с минимальным количеством кода и полной интеграцией с реактивной системой Vue.

Оглавление