How can I display divA when radio button A is checked and display divB when radio button B is checked?
<b-form-radio value="A">A</b-form-radio>
<b-form-radio value="B">B</b-form-radio>
<!-- divA -->
<div>
...
</div>
<!-- divB -->
<div>
...
</div>
Assuming your custom radio control (b-form-radio) supports v-model, you can do this:
<b-form-radio v-model="selected" value="A">A</b-form-radio>
<b-form-radio v-model="selected" value="B">B</b-form-radio>
<!-- divA -->
<div v-show="selected === 'A'">
...
</div>
<!-- divB -->
<div v-show="selected === 'B'">
...
</div>
Additionally, in your component data function, you need to make selected as a reactive property:
{
data() {
return {
// Initially selected will be null
// to hide both the div
selected: null
}
}
}
In summary, it is the combination of v-show directive together with v-model. Also, you can use v-if instead of v-show if you do not want other div to be rendered at all on the page.
