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

Question

[jeruthadam]

Пытаюсь сделать простой враппер чекбокса. Простой true/false дался без проблем, но как быть когда надо передавать не Boolean значения в цикле и отмеченные пихать в массив selected?

https://codepen.io/anon/pen/bPyYmr

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

<v-checkbox
      v-model="selected"
      v-for="a in array"
      :key="a.id"
      :label="a.name"
    />

И при этом работало бы и с одиночными чекбоксами с Boolean, и с таким циклом с массивом?

Answer 1

[0xD34F]

model: {
  prop: 'checked',
},
props: {
  value: [ String, Number ],
  checked: [ Boolean, Array ],
  label: String,
  disabled: Boolean,
},
computed: {
  model: {
    get() {
      return this.checked;
    },
    set(val) {
      this.$emit('input', val);
    },
  },
},

<label>
  <input
    type="checkbox"
    v-model="model"
    :value="value"
    :disabled="disabled"
  />
  {{ label }}
</label>

https://jsfiddle.net/bj7qwyas/

Comments

[jeruthadam]

Интересное решение, благодарю