如何将 Bootstrap 按钮组收音机与 Vue 的 V 模型一起使用？

Question

我正在使用带有引导程序 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(...)"的实现更改为v-model后，mode永远不会更新，没有给出任何错误。

引导文档指出：

这些按钮的已检查状态仅通过按钮上的单击事件更新

这可能与 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>