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!
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.
