[Vuejs]-VueJS radio button (b-form-radio) remains unchecked

by

0👍

I think you can use simpler and more flexible code for this section of your code. I simulate your situation in codepen to find your problem. I believe that you shouldn’t use :checked and :value at the same time in the b-form-radio. I share my code with you and maybe it’ll help you to understand. I suggest that put your script section in the question.

Note that I’m using a timeout to show the delay between your request and the response.

new Vue({
  el: "#app",
  data() {
    return {
      selected: "second",
      options: [{
          text: "First",
          value: "first"
        },
        {
          text: "Second",
          value: "second"
        }
      ]
    };
  },
  mounted() {
    setTimeout(() => {
      this.selected = "first";
    }, 3000);
  }
});
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
  <b-collapse id="collapse-1" class="mt-2">
    <b-card>
      <b-form-radio-group id="radio-group-2" v-model="selected" name="radio-sub-component">
        <b-form-radio v-for="item in options" :value="item.value">{{item.text}}</b-form-radio>
      </b-form-radio-group>

      <b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
      <b-collapse id="collapse-1-inner" class="mt-2">
        <b-card>
          <b-form-radio-group id="radio-group-1" v-model="selected" :options="options" name="radio-options"></b-form-radio-group>
        </b-card>
      </b-collapse>
    </b-card>
  </b-collapse>
</div>

Leave a comment