Как на vue3 создать multy-checkbox?

Question

[Дмитрий Меньшиков]

Ребята помогите решить задачу.
Когда я нажимаю "выбрать все ключи", то все checkbox становятся активные и попадают в некий массив, но когда один из этих checkbox не активен, то checkbox "выбрать все ключи" становится не активным и из некого массива удаляется?

Answer 1

[0xD34F]

Как засунуть значения выбранных чекбоксов в массив - рассказывается в документации.

Значение для чекбокса "выбрать всё" будет вычисляемым. Ничего не выбрано - false, всё выбрано - true, для остальных вариантов undefined, при котором в true будет выставляться indeterminate. Также у него будет сеттер - если попытаться назначить true, то выбранными должны стать все чекбоксы; если false, то никто.

Вот так:

const items = ref([
  { id:  69, title:  'hello, world!!' },
  { id: 187, title:  'fuck the world' },
  { id: 666, title: 'fuck everything' },
]);

const checked = ref([ 187 ]);
  
const isAllChecked = computed({
  get: () => ({
    0: false,
    [items.value.length]: true,
  })[checked.value.length],
  set: val => checked.value = val ? items.value.map(n => n.id) : [],
});

<div>
  <label>
    <input
      type="checkbox"
      v-model="isAllChecked"
      :indeterminate.prop="isAllChecked === undefined"
    >
    <b>Check all</b>
  </label>
</div>
<div v-for="n in items" :key="n.id">
  <label>
    <input type="checkbox" v-model="checked" :value="n.id">
    {{ n.title }}
  </label>
</div>

Comments

[Дмитрий Меньшиков]

Привет, вижу все работает, но честно, мне не понятно почему это работает?

[0xD34F]

Добавил небольшое пояснение.

[Злой минон]

Дмитрий Меньшиков, попробуй документацию прочитать, а лучше не кодить вообще.