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

Question

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: []
}})

dagalti · Accepted Answer · 2019-03-23 16:17:05Z

1

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

answered Mar 23, 2019 at 16:17

dagalti

1,9661 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related