0

data-toggle="buttons"コードで が言及されている場合、Vue と Bootstrap の間に競合があります。

これにより、ボタンの強調表示は機能しますが、チェックボックスの値がバインドされている v-model 配列は更新されません。

そのコードを削除すると、選択したボタンの強調表示が機能しません。ただし、v-model は機能し始めます。

この問題を解決するには？

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

1 に答える 1

1

コードペン : 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クラスにあるかどうかを確認します

于 2019-03-23T16:17:05.067 に答える