CODEWITHSUNDEEP
vue.jsbootstrap-4vuejs2
andig
andig

Reputation: 13888

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

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?

Upvotes: 0

Views: 2413

Answers (1)

Hiren F
Hiren F

Reputation: 529

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>

Upvotes: 8

Related Questions