Как правильно привязать v-model к компоненту кастомного checkbox?

Question

[Camaro67]

Здравствуйте! Исходя из документации привязка v-model в компоненте checkbox и radio должна выглядеть примерно так:

Vue.component('app-checkbox', {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: ['name', 'value', 'checked'],
    template: `
        <label>
            <input 
                type="checkbox" 
                :name="name" 
                :value="value" 
                :checked="checked" 
                @change="$emit('change', $event.target.checked)">
            <slot></slot>
        </label>
    `
});

Но в таком случае v-model работает с булевыми значениями, а массив передать уже не получится (он будет преобразован в булево значение). Что я делаю не так?

UPD: Пример для лучшего понимания

Comments

[0xD34F]

Что я делаю не так?

А хрен его знает. Вы же не сказали, что пытаетесь сделать. Зачем вам использовать массив в качестве значения для чекбокса? Это же БРЕД.

[Camaro67]

0xD34F, Где вы там увидели массив в качестве значения чекбокса, там массив используется для checked (для этого model и указана)? И что бредового, если должно быть отмечено несколько чекбоксов? Вроде вполне обычное поведение, чекбоксы для того и есть, что бы их можно было отметить несколько штук иначе для этого есть радио. В документации даже пример есть где используется массив https://vuejs.org/v2/guide/forms.html#Checkbox

[Алексей Ярков]

Camaro67,

И что бредового, если должно быть отмечено несколько чекбоксов?

Бредового ничего, если не упоминать массив в контексте одного чекбокса.

В документации даже пример есть где используется массив https://vuejs.org/v2/guide/forms.html#Checkbox

Вы даже доку самостоятельно нашли. Так в чем проблема сделать как написано?

[Camaro67]

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

Так в чем проблема сделать как написано?

Так я и делаю как говорится в документации https://vuejs.org/v2/guide/components-custom-event... Но это не работает для массивов, в том то и проблема.

[0xD34F]

Camaro67, а, в этом смысле. Сейчас всё будет, подождите пару минут.

[Camaro67]

0xD34F, Алексей Ярков, Для лучшего понимания добавил живой пример в описание вопроса.

Answer 1

[0xD34F]

держите

UPD. Или, с использованием вашей демки.

Comments

[Camaro67]

А зачем использовать checkedInner и вычисляемое свойство model? Вот так же вроде бы достигается тот же самый результат или я что-то упускаю?

[0xD34F]

Упускаете. Так напрямую выполняется изменение значения параметра, чего делать не стоит (и о чём сыпятся соответствующие ворнинги в консоль, откройте, посмотрите).

UPD. С checkedInner я конечно перемудрил, не нужен он. Обновил ссылку в ответе.

[Camaro67]

0xD34F, Теперь понятно, большое спасибо за помощь!

[VegasChickiChicki]

0xD34F, Гениально, спасибо!)