Чекбоксы

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

Связывание с одиночным чекбоксом

Для одиночного чекбокса ключевым моментом является двусторонняя привязка значения. В Petite-Vue это достигается с помощью директивы v-model. Пример:

<div v-scope="{ accepted: false }">
  <input type="checkbox" v-model="accepted">
  Принять условия
  <p>Статус: {{ accepted ? 'Принято' : 'Не принято' }}</p>
</div>
  • v-model автоматически синхронизирует свойство accepted с состоянием чекбокса.
  • Изменение состояния чекбокса мгновенно отражается в интерфейсе через реактивное выражение {{ accepted }}.

Можно задать начальное значение true, чтобы чекбокс был отмечен по умолчанию:

v-scope="{ accepted: true }"

Работа с несколькими чекбоксами

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

<div v-scope="{ selectedFruits: [] }">
  <label><input type="checkbox" value="apple" v-model="selectedFruits"> Яблоко</label>
  <label><input type="checkbox" value="banana" v-model="selectedFruits"> Банан</label>
  <label><input type="checkbox" value="orange" v-model="selectedFruits"> Апельсин</label>
  <p>Выбрано: {{ selectedFruits.join(', ') }}</p>
</div>
  • При выборе чекбокса значение добавляется в массив selectedFruits.
  • При снятии флажка значение удаляется.
  • Это позволяет легко получать список выбранных элементов без дополнительной логики.

Динамическое создание чекбоксов

Чекбоксы можно генерировать на основе массива данных с использованием v-for:

<div v-scope="{ options: ['Красный', 'Зелёный', 'Синий'], chosen: [] }">
  <label v-for="color in options" :key="color">
    <input type="checkbox" :value="color" v-model="chosen">
    {{ color }}
  </label>
  <p>Выбрано цветов: {{ chosen.join(', ') }}</p>
</div>
  • :value задаёт уникальное значение для каждого чекбокса.
  • Реактивный массив chosen автоматически обновляется при изменении состояния чекбоксов.

Управление состоянием через методы

Помимо прямого использования v-model, состояние чекбоксов можно изменять программно через методы в объекте v-scope. Пример:

<div v-scope="{
  selected: [],
  toggleAll() { this.selected = this.selected.length ? [] : ['a', 'b', 'c'] }
}">
  <label><input type="checkbox" value="a" v-model="selected"> A</label>
  <label><input type="checkbox" value="b" v-model="selected"> B</label>
  <label><input type="checkbox" value="c" v-model="selected"> C</label>
  <button @click="toggleAll()">Переключить все</button>
  <p>Выбрано: {{ selected.join(', ') }}</p>
</div>
  • Метод toggleAll проверяет текущий массив и либо очищает его, либо устанавливает все значения.
  • Любые изменения массива автоматически отражаются на состоянии чекбоксов благодаря реактивности Petite-Vue.

Работа с атрибутом indeterminate

Для чекбоксов с промежуточным состоянием (indeterminate) Petite-Vue позволяет программно управлять этим состоянием:

<div v-scope="{ partial: true, checked: false }">
  <input type="checkbox" :indeterminate="partial" v-model="checked">
  Промежуточный выбор
</div>
  • Атрибут indeterminate не меняет значение checked, но визуально показывает промежуточное состояние.
  • Обычно используется при частично выбранных группах элементов.

Реактивное наблюдение за изменениями

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

<div v-scope="{ fruits: ['apple', 'banana'], selected: [] }">
  <label v-for="fruit in fruits" :key="fruit">
    <input type="checkbox" :value="fruit" v-model="selected"> {{ fruit }}
  </label>
  <p>Количество выбранных: {{ selected.length }}</p>
</div>
  • selected.length автоматически обновляется при изменении состояния чекбоксов.
  • Позволяет строить динамические интерфейсы без дополнительного кода отслеживания событий.

Итоговые рекомендации

  • Использовать v-model для автоматической синхронизации состояния.
  • Для множественного выбора применять массивы и value для каждого чекбокса.
  • Динамические чекбоксы удобно создавать через v-for.
  • Атрибут indeterminate подходит для частичных выборов.
  • Методы и вычисляемые свойства позволяют управлять состоянием программно и строить сложные интерфейсы без прямой манипуляции DOM.

Эти приёмы позволяют создавать гибкие формы и элементы интерфейса, полностью используя реактивность Petite-Vue.

Оглавление