Блог

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

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

Если я удалю этот код, подсветка выбранной кнопки не будет работать. Однако 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: []
}})
  

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

Не знаю, в чем проблема с data-toggle =»кнопки» с 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