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

Petite-Vue предоставляет простой и эффективный способ работы с пользовательским интерфейсом. Одна из частых задач при создании динамических интерфейсов — это возможность выбора нескольких элементов. В данном контексте множественный выбор представляет собой функциональность, при которой пользователь может выбрать несколько опций или элементов из списка. Рассмотрим, как реализовать множественный выбор с использованием библиотеки Petite-Vue.

Основы работы с множественным выбором

Для создания интерфейса с множественным выбором можно использовать стандартный элемент <input type="checkbox"> или <select multiple>. Оба варианта могут быть эффективно управляемы с помощью Petite-Vue. В примере ниже показано, как использовать чекбоксы для реализации множественного выбора.

<div id="app">
  <label>
    <input type="checkbox" v-model="selectedItems" value="item1"> Элемент 1
  </label>
  <label>
    <input type="checkbox" v-model="selectedItems" value="item2"> Элемент 2
  </label>
  <label>
    <input type="checkbox" v-model="selectedItems" value="item3"> Элемент 3
  </label>
  <div>
    Выбрано: {{ selectedItems }}
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/petite-vue@0.5.0/dist/petite-vue.js"></script>
<script>
  PetiteVue.createApp({
    selectedItems: []
  }).mount("#app");
</script>

Здесь используется директива v-model, которая связывает состояние каждого чекбокса с массивом selectedItems. Когда пользователь выбирает или отменяет выбор, соответствующие значения добавляются или удаляются из массива.

Использование данных для отображения

Когда нужно вывести информацию о выбранных элементах, можно использовать реактивность Petite-Vue для обновления интерфейса в реальном времени. Пример:

<div id="app">
  <label>
    <input type="checkbox" v-model="selectedItems" value="apple"> Яблоко
  </label>
  <label>
    <input type="checkbox" v-model="selectedItems" value="orange"> Апельсин
  </label>
  <label>
    <input type="checkbox" v-model="selectedItems" value="banana"> Банан
  </label>
  <p>Выбранные фрукты: {{ selectedItems.join(", ") }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/petite-vue@0.5.0/dist/petite-vue.js"></script>
<script>
  PetiteVue.createApp({
    selectedItems: []
  }).mount("#app");
</script>

В этом примере список выбранных фруктов отображается через привязку к selectedItems. При изменении состояния чекбоксов, массив автоматически обновляется, и список в интерфейсе обновляется с учетом выбора.

Ограничение количества выбранных элементов

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

<div id="app">
  <label>
    <input type="checkbox" v-model="selectedItems" value="item1" :disabled="selectedItems.length >= 3 && !selectedItems.includes('item1')"> Элемент 1
  </label>
  <label>
    <input type="checkbox" v-model="selectedItems" value="item2" :disabled="selectedItems.length >= 3 && !selectedItems.includes('item2')"> Элемент 2
  </label>
  <label>
    <input type="checkbox" v-model="selectedItems" value="item3" :disabled="selectedItems.length >= 3 && !selectedItems.includes('item3')"> Элемент 3
  </label>
  <div>
    Выбрано: {{ selectedItems }} (Максимум 3 элемента)
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/petite-vue@0.5.0/dist/petite-vue.js"></script>
<script>
  PetiteVue.createApp({
    selectedItems: []
  }).mount("#app");
</script>

Здесь атрибут :disabled используется для отключения дополнительных чекбоксов, если уже выбрано три элемента. Условие selectedItems.length >= 3 && !selectedItems.includes('itemX') проверяет, если количество выбранных элементов достигло лимита, и блокирует все остальные, кроме тех, которые уже выбраны.

Использование элемента <select multiple>

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

<div id="app">
  <select v-model="selectedItems" multiple>
    <option value="apple">Яблоко</option>
    <option value="orange">Апельсин</option>
    <option value="banana">Банан</option>
  </select>
  <p>Выбрано: {{ selectedItems.join(", ") }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/petite-vue@0.5.0/dist/petite-vue.js"></script>
<script>
  PetiteVue.createApp({
    selectedItems: []
  }).mount("#app");
</script>

В данном случае элемент <select multiple> позволяет выбрать несколько значений. В отличие от чекбоксов, этот подход более подходит для ситуаций, когда нужно выбрать элементы из длинного списка.

Динамическое создание элементов

Petite-Vue позволяет легко работать с динамическими данными, создавая элементы формы на основе массива. Это полезно, когда количество опций может изменяться. Пример с динамическим созданием чекбоксов:

<div id="app">
  <label v-for="(item, index) in items" :key="index">
    <input type="checkbox" v-model="selectedItems" :value="item"> {{ item }}
  </label>
  <div>
    Выбрано: {{ selectedItems }}
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/petite-vue@0.5.0/dist/petite-vue.js"></script>
<script>
  PetiteVue.createApp({
    items: ['Яблоко', 'Апельсин', 'Банан', 'Груша', 'Персик'],
    selectedItems: []
  }).mount("#app");
</script>

В данном примере массив items используется для динамического создания чекбоксов. Это позволяет легко добавлять или удалять опции без необходимости изменять HTML-код вручную.

Обработка изменений через методы

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

<div id="app">
  <label>
    <input type="checkbox" v-model="selectedItems" value="item1" @change="updateSelection"> Элемент 1
  </label>
  <label>
    <input type="checkbox" v-model="selectedItems" value="item2" @change="updateSelection"> Элемент 2
  </label>
  <label>
    <input type="checkbox" v-model="selectedItems" value="item3" @change="updateSelection"> Элемент 3
  </label>
  <div>
    Выбрано: {{ selectedItems }}
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/petite-vue@0.5.0/dist/petite-vue.js"></script>
<script>
  PetiteVue.createApp({
    selectedItems: [],
    updateSelection() {
      console.log("Выбор обновлен:", this.selectedItems);
    }
  }).mount("#app");
</script>

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

Заключение

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

Оглавление