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

Question

[Anton8989]

Доброго времени суток) Необходимо, чтобы при клике на Второй чекбокс снималась галочка с Первого, и на оборот) Может кто-нибудь помочь) Спасибо) Вот код:

<template lang="pug">
div
  div(v-for='item in items')
    v-checkbox(v-model='item.checked' :label='item.text' :value='item.id' hide-details='')
</template>

<script>
export default {
  data () {
    return {
      checked: true,
      items: [
        {text: 'Первый1', checked: true},
        {text: 'Первый2', checked: false},
      ]
    }
  }
}
</script>

Comments

[Ankhena]

Для этого придуманы input type="radio".

Answer 1

[Alex]

Ну вот так и закодить:
По клику на второй чекбокс -- снять с первого
И наоборот.

А вообще, использовать type="radio"

Comments

[Anton8989]

А можно поподробней)

[Alex]

Anton8989, Друг, если ты не умеешь элементарно гуглить, искать и анализировать, то, боюсь, выбрал не ту професию :(

[Alex]

Anton8989, https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Answer 2

[Anton8989]

Короче, если кому понадобится)

<template lang="pug">
div
  div(v-for='item in items')
    v-checkbox(v-model='item.checked' :label='item.text' hide-details @click="onClick(item.id)")
</template>

<script>
export default {
  data () {
    return {
      checked: true,
      items: [
        {text: 'Первый1', checked: true, id: 1},
        {text: 'Первый2', checked: false, id: 2},
      ]
    }
  },
  methods: {
    onClick (data) {
      if (this.items.filter(it => it.id === data)[0].checked === true) {
        this.items.filter(it => it.id !== data)[0].checked = false
      }
    }
  }
}
</script>