How to use Bootstrap button-group radios with Vue's v-model?

Question

I'm using vuejs with bootstrap 4.4. Refactoring the code I'd like to move from invoking methods to using v-model (some bootstrap markup omitted for clarity). The radios button group is modeled after https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons:

{{mode}}
<div class="btn-group btn-group-toggle py-4 mb-2" data-toggle="buttons">
    <label>
        <input type="radio" name="mode" value="off" v-model="mode">Stop</input>
    </label>
    <label>
        <input type="radio" name="mode" value="now" v-model="mode">Sofort</input>
    </label>
</div>

mode is a simple property:

data: function () {
  return {
    mode:"pv",
  };
},

Unfortunately, after changing from the previous implementation using v-on:click="setMode(...)" to v-model, mode is never updated, no error given.

The bootstrap docs state:

The checked state for these buttons is only updated via click event on the button

Might that conflict with vuejs's v-model handling? How can I make v-model work with bootstrap radio groups?

You should check this example: https://vuejs.org/v2/guide/forms.html#Radio — KingGary, Feb 11 '20 at 09:20
Thank you, already done before, should have written that. I cannot see a/the mistake :( — andig, Feb 11 '20 at 09:24
And maybe your variable is assigned before your axios call is completed hence first just try assigning a static value to mode rather than through the api or use a promise in axios call. — Riddhi, Feb 11 '20 at 10:46
See https://stackoverflow.com/questions/49023790/vue-2-with-bootstrap-4-radio-button-action-not-working-when-using-data-toggle?rq=1 too — andig, May 11 '20 at 18:30

score 8 · Accepted Answer · answered Feb 12 '20 at 04:27

Issue is with data-toggle property, as long as you remove it, it will work. I have tried with following and it is working, you just need to manage active class with Vue variable's value.

<div id="app">
    {{mode}}
    <div class="btn-group btn-group-toggle">
      <label class="btn btn-secondary active">
        <input type="radio" name="options" value="now" id="option1"  v-model="mode" autocomplete="off" checked> Active
      </label>
      <label class="btn btn-secondary">
       <input type="radio" name="options"  value="off" id="option2"  v-model="mode" autocomplete="off"> Radio
      </label>
    </div>
</div>

How to use Bootstrap button-group radios with Vue's v-model?

1 Answers1