如何在 Vue 的 v-model 中使用 Bootstrap 按钮组收音机？

Question

我在 bootstrap 4.4 中使用 vuejs。重构我想从调用方法转移到使用的代码v-model（为了清楚起见，省略了一些引导标记）。单选按钮组模仿https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons：

{{mode}}
<div class="btn-group btn-group-toggle py-4 mb-2" data-toggle="buttons">
    <label>
        <input type="radio" name="mode" value="off" v-model="mode">Stop</input>
    </label>
    <label>
        <input type="radio" name="mode" value="now" v-model="mode">Sofort</input>
    </label>
</div>

mode 是一个简单的属性：

data: function () {
  return {
    mode:"pv",
  };
},

不幸的是，在使用v-on:click="setMode(...)"to从以前的实现更改后v-model，mode永远不会更新，也没有给出错误。

bootstrap 文档说明：

这些按钮的选中状态仅通过按钮上的单击事件更新

这可能与 vuejs 的v-model处理冲突吗？如何v-model与引导无线电组一起工作？

Answer 1

问题在于data-toggle财产，只要您将其删除，它就会起作用。我已经尝试过以下并且它正在工作，您只需要使用 Vue 变量的值来管理活动类。

<div id="app">
    {{mode}}
    <div class="btn-group btn-group-toggle">
      <label class="btn btn-secondary active">
        <input type="radio" name="options" value="now" id="option1"  v-model="mode" autocomplete="off" checked> Active
      </label>
      <label class="btn btn-secondary">
       <input type="radio" name="options"  value="off" id="option2"  v-model="mode" autocomplete="off"> Radio
      </label>
    </div>
</div>