I’m new using Vue and specifically Bootstrap Vue and I’m trying to build a form with multiple radio groups.
My problem is that when I change the value in one of them the others don’t change their values (this was checked with Vue DevTools) but visually it looks like none of the values are selected
I don’t know what is wrong with my approach
I post here a simplified version of the code looking for some help, thanks in advance:
<template> <div> <b-form-group label="Radio group 1" v-slot="{ ariaDescribedby }"> <b-form-radio-group id="radio-group-1" v-model="selected1" :options="options1" :aria-describedby="ariaDescribedby" name="radio-options" ></b-form-radio-group> </b-form-group> <b-form-group label="Radio Group 2" v-slot="{ ariaDescribedby }"> <b-form-radio-group id="radio-group-2" v-model="selected2" :options="options2" :aria-describedby="ariaDescribedby" name="radio-options" ></b-form-radio-group> </b-form-group> </div> </template> <script> export default { data() { return { selected1: 'first', options1: [ { text: 'First', value: 'first' }, { text: 'Second', value: 'second' }, ], selected2: 'one', options2: [ { text: 'One', value: 'one' }, { text: 'Two', value: 'two' }, ] } } } </script>
Advertisement
Answer
Since both <b-form-radio-group>
elements have the same name, “radio-options”, visually they are treated like one group. The different v-model
would still function correctly but this isn’t what you want visually. Give the second group a different name:
<b-form-radio-group id="radio-group-2" v-model="selected2" :options="options2" :aria-describedby="ariaDescribedby" name="radio-options2" ></b-form-radio-group>
Here I changed it to radio-options2
.