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

Question

[Anton8989]

Доброго времени суток, есть пример кода( jsfiddle.net/v8oa5d69/4)
Как в данном примере сделать возможность попеременного нажатия чекбоксов, скажем если в одном чекбоксе проставить галочку то в других двух они снимутся) Заранее спасибо)

Answer 1

[0xD34F]

Внутри:

inheritAttrs: false,
model: {
  prop: 'checked',
},
props: [ 'value', 'checked' ],
computed: {
  innerChecked: {
    get() {
      return this.checked;
    },
    set(val) {
      this.$emit('input', val);
    },
  },
},

<label>
  <input
    type="checkbox"
    v-model="innerChecked"
    v-bind="$attrs"
    :value="value"
  >
  <slot></slot>
</label>

Снаружи:

data: () => ({
  items: [
    { label:  'hello, world!!', value:  69 },
    { label:  'fuck the world', value: 187 },
    { label: 'fuck everything', value: 666 },
  ],
  checked: [ 187 ],
}),
watch: {
  checked(val) {
    if (val.length > 1) {
      this.checked = val.slice(-1);
    }
  },
},

<v-checkbox
  v-for="n in items"
  v-model="checked"
  :value="n.value"
  name="items[]"
>
  {{ n.label }}
</v-checkbox>

https://jsfiddle.net/769wdoq5/

Один вопрос - на хрена? Можно заменить чекбоксы радиокнопками, и добавить ещё одну, которая будет обозначать отсутствие выбора.