Vue 复选框值未使用 Bootstrap 4 数据切换 = "buttons" 更新

Question

当代码中提到 data-toggle="buttons"时，vue和bootstrap之间存在冲突。

突出显示按钮的工作起作用，但是复选框值所绑定的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

不知道vuejs的data-toggle ="按钮"的问题是什么。当您单击实际将" Active"类切换到复选框的复选框时。您可以使用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