vue.jsbootstrap-4radio-buttonradio-groupbootstrap-vue

The radio button <b-form-radio-group> is not checked (turning blue)


I'm using Bootstrap-vue.JS to make a group of radio button. I have a reset function to have one of radio button checked. when I call the function, the value of the radio button is change as I expected, but the radio button itself does not showing its changed (the circle is not turning blue)

here is the template

<b-row md="9" align-h="center">
 <b-form-group>
  <b-form-radio-group
   id="radio-group-1"
   v-model="voc_type"
   name="radio-options"
  >
   <b-form-radio value="Request">Request</b-form-radio>
   <b-form-radio value="Complain">Complain</b-form-radio>
   <b-form-radio value="Saran">Saran</b-form-radio>
   <b-form-radio value="Pujian">Pujian</b-form-radio>
  </b-form-radio-group>
 </b-form-group>
</b-row>
{{ voc_type }}

Here is the initialization when the vue is created

export default{
 data{
  return{
   voc_type: 'Request',
  }
 }
}

Here is the reset function

reset(){
 this.voc_type= 'Request'
}

when I call the reset(), the output of {{ voc_type }} is "Request" as I expected, but the radio button is not turning blue. idk why..


Solution

  • I implemented a reset buttons, it works as expected now:

    <template>
      <div>
        <b-row md="9" align-h="center">
          <b-form-group>
            <b-form-radio-group id="radio-group-1" v-model="voc_type" name="radio-options">
              <b-form-radio value="Request">Request</b-form-radio>
              <b-form-radio value="Complain">Complain</b-form-radio>
              <b-form-radio value="Saran">Saran</b-form-radio>
              <b-form-radio value="Pujian">Pujian</b-form-radio>
            </b-form-radio-group>
          </b-form-group>
        </b-row>
        {{ voc_type }}
        <b-btn @click="reset()">Reset</b-btn>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          voc_type: 'Request'
        };
      },
      methods: {
        reset() {
          this.voc_type = 'Request';
        }
      }
    };
    </script>
    

    There is a typo in your data function due to this the Vue reactivity probably didn't work correctly

      data() { <-- correct this line 
        return {
          voc_type: 'Request'
        };
      },