CODEWITHSUNDEEP
twitter-bootstrapvue.js
J. Doe
J. Doe

Reputation: 17

Vue checkbox value not updating with Bootstrap 4 data-toggle="buttons"

There is a conflict between Vue and Bootstrap when data-toggle="buttons" is mentioned in the code.

With that the highlighting of buttons work but the v-model array that the checkbox value is bound to is not updated.

If I remove that code, the highlighting of the selected button does not work. However, v-model starts working.

How to solve this issue?

HTML:

  <div class="form-group">
    <label class="searchLabel">Tool:</label>
    <div class="btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" >
        <input type="checkbox" :value="tool.tool_id" v-model="availability">
        {{tool.tool_name}}
      </label>
    </div>
  </div>

Vue.JS:

new Vue({
el: '#dev',
data: {
  output: {tool: []},
  availability: []
}})

Upvotes: 0

Views: 1022

Answers (1)

dagalti
dagalti

Reputation: 1956

Codepen : https://codepen.io/anon/pen/MxLyZG

Dont know whats the issue of data-toggle="buttons" with vuejs. When you click the checkbox that actually toggle 'active' class to the checkbox. you can toggle active class using vue. update the code with 

<div class="btn-group-toggle">
   <label class="btn btn-outline-primary m-1" v-for="tool in output.tool" 
      :class="{'active' : availability.indexOf(tool.tool_id) !== -1}">
     <input type="checkbox" :value="tool.tool_id" v-model="availability"  >
      {{tool.tool_name}}
   </label>
</div>

Here I check if tool_id is in availability then binding active class

Upvotes: 1

Related Questions