Bootstrap 4 radio buttons and Vue’s v-model

If you’ve ever tried to make consistent, fairly passable-looking forms, your first knee-jerk reaction is probably to reach for Bootstrap. Now it offers a number of great out-of-the box options for forms, one of which I use regularly is split buttons as a radio. It looks good and is much easier to click – better for your conversion rates!

Example of a split radio button with Bootstrap 4 from one of my Web Apps, machinedown

The code for the buttons above look like this:

<div class="col-auto btn-group btn-group-toggle" data-toggle="buttons">
<label for="servicer_type" class="btn btn-info">
<input v-model="selectedServicerType" type="radio" value="UserSelect">
User
</label>
<label for="servicer_type" class="btn btn-info">
<input v-model="selectedServicerType" type="radio" value="OrgCreateForm">
Organisation
</label>
</div>

Now unfortunately setting the v-model on both these radio buttons as per the Vue documentation doesn’t work!

Fortunately the solution is simple (thank you pandora2000!). Instead of using Bootstrap’s data-toggle feature to control the value and the active state of the radios, we must remove it, as the j-query magic happening behind the scenes is interfering with the v-model magic, so we can only use one of them.

We have another issue, now data-toggle="buttons" doesn’t handle our active buttons for us, we also need to handle that in Vue.

<label class="btn btn-info" :class="{ 'active': servicerType === 'Org'}">
  <input type="radio" name="servicer" :value="Org" v-model="servicerType">
    Org
</label>

Now our radio value is bound to the v-model and the active state is handled correctly.

But unfortunately it looks like this! The radio check is still there. We’ll try to remove that later.

Radio button group working
Radio button group, still shows the radio point though

Leave a Reply

Your email address will not be published. Required fields are marked *