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

【问题标题】：How to use Bootstrap button-group radios with Vue's v-model?如何在 Vue 的 v-model 中使用 Bootstrap 按钮组收音机？
【发布时间】：2020-05-26 15:41:07
【问题描述】：

我正在使用带有引导程序 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 与引导无线电组一起使用？

【问题讨论】：

你应该检查这个例子：vuejs.org/v2/guide/forms.html#Radio
谢谢，之前已经写过了，应该写的。我看不到/错误:(
你的 this.state 变量是什么？
也许您的变量是在您的 axios 调用完成之前分配的，因此首先尝试将静态值分配给 mode 而不是通过 api 或在 axios 调用中使用 promise。
@riddhi 示例简化并删除了 axios。结果相同。

标签： vue.js bootstrap-4 vuejs2

【解决方案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>

【讨论】：