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 =“ buttons”是什么问题。当您单击将“活动”类实际切换到该复选框的复选框时。您可以使用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类

Vue复选框值未使用Bootstrap 4 data-toggle =“ buttons”更新

1 个答案: