Значение флажка Vue не обновляется с помощью Bootstrap 4 data-toggle = "buttons"

Question

Существует конфликт между Vue и Bootstrap, когда в коде упоминается data-toggle="buttons".

При этом подсветка кнопок работает, но массив v-модели, к которому привязано значение флажка, не обновляется.

Если я удаляю этот код, выделение выбранной кнопки не работает.Однако v-модель начинает работать.

Как решить эту проблему?

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

Answer 1

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

Не знаю, в чем проблема data-toggle = "buttons" с vuejs.Когда вы нажимаете флажок, который фактически переключает «активный» класс к флажку.Вы можете переключать активный класс, используя vue.обновить код с помощью

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

Здесь я проверяю, находится ли tool_id в availability, а затем связывается active class