[Vuejs]-Make the checkbox single choice

by

0👍

✅

A basic approach to the question you stated:

new Vue({
  el: "#app",
  data() {
    return {
      checkboxes: [{
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
      ]
    }
  },
  methods: {
    onChange(cb) {
      this.checkboxes = this.checkboxes.map(checkbox => ({ checked: cb == checkbox }))
    },
  },
  template: `
    <div>
      <div
        v-for="(checkbox, i) in checkboxes"
        :key="i"
      >
        <input
          type="checkbox"
          :checked="checkbox.checked"
          @change="() => onChange(checkbox)"
        />
        {{ checkbox.checked }}
      </div>
    </div>
  `
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

Leave a comment