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..
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'
};
},