CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentbootstrap-vue
Obinna Iloeje
Obinna Iloeje

Reputation: 45

Vue check multiple radio buttons

I'm trying to check multiple radio buttons in vue but it's not working. Normal html lets you check multiple radio buttons if the name attributes are different but it isn't working in vue

  export default {
    data() {
      return {
        selected: []
      }
    }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div>
    <b-form-group label="Individual radios">
      <b-form-radio v-model="selected" name="some-radios0" value="A">Option A</b-form-radio>
      <b-form-radio v-model="selected" name="some-radios1" value="B">Option B</b-form-radio>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>
So I changed the name attributes but it still isn't working. This is so unlikely.

Upvotes: 1

Views: 3661

Answers (1)

BTL
BTL

Reputation: 4666

If you want to check multiple checkboxes then you should use b-form-checkbox-group

Here is a link to the documentation : https://bootstrap-vue.js.org/docs/components/form-checkbox

Here is your code modified : 

<template>
  <div>
    <b-form-group label="Checkboxes">
      <b-form-checkbox-group v-model="selected" name="some-radios">
        <b-form-checkbox value="A">Option A</b-form-checkbox>
        <b-form-checkbox value="B">Option B</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
      }
    }
  }
</script>

Upvotes: 3

Related Questions