Vue v-model 对 BS4 单选按钮组没有反应

Question

我希望我只是遗漏了一些简单的东西，因为我已经看这个太久了，但我被难住了。

我有一个输入绑定到 vuejs 的表单。我有一组用于选择 "gender" 的 2 个单选按钮，绑定工作正常。如果我点击任一单选按钮，我可以在 vue 组件检查器中看到数据变化。

但我正在尝试将单选按钮更改为 Bootstrap 4 按钮组，但似乎无法使 v-model 绑定起作用。无论我尝试什么，当我单击按钮组中的任一按钮时，我的 vue 数据中的 gender_id 都不会更新。

表单输入值是通过 vue 组件属性输入的，但为了简单起见，我的无线电 buttons/button 组数据如下所示：

export default {
    data() {
        return {
            genders: {
                1: "Men's",
                2: "Women's"
            },
            gender_id: {
                type: Number,
                default: null
            }
        }
    }
}

这是我的单选按钮版本的代码（可以正常工作）：

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="form-check form-check-inline" v-for="(gender, key) in genders" :key="key">
            <input type="radio"
                class="form-check-input"
                name="gender_id"
                :id="'gender_' + key"
                :value="key"
                v-model.number="gender_id">
            <label class="form-check-label" :for="'gender_' + key">
                {{ gender }}
            </label>
        </div>
    </div>
</div>

这是未正确绑定到 vue 中的 gender_id 数据的按钮组版本。

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-secondary" v-for="(gender, key) in genders" :key="key">
                <input type="radio"
                    class="btn-group-toggle"
                    name="gender_id"
                    :id="'gender_' + key"
                    :value="key"
                    autocomplete="off"
                    v-model.number="gender_id">
                {{ gender }}
            </label>
        </div>
    </div>
</div>

我一直在使用以下 Boostrap 4 文档来尝试使其正常工作。 https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

在按钮组的文档中，它们甚至不包含单选输入的值属性，而在表单单选按钮的文档中却包含它。 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios

这是为了简单起见还是单选按钮的按钮组甚至没有 return 选中按钮的值？

我看到其他线程指出按钮组并不意味着用作单选按钮，但如果 BS4 是这样，那么为什么 Bootstrap 按钮组会像他们在引用的文档中那样具有单选按钮多于？如果您无法检索选中状态，那么为什么不使用 <button> 而不是 <label><input type=radio></label>？

关于我做错了什么的任何想法and/or 理解不正确？

非常感谢！

Answer 1

您在这里使用 v-model 实际上并没有错。

但是：您必须将 class "active" 添加到包装每个 radio-button <input>.

的 <label>

有关工作示例，请参阅 this fiddle。

这就是你想要的吗？

Answer 2

非常感谢@ebbishop 提供的有用见解。

该问题与 vue 和 bootstrap 都试图将 javascript 应用于按钮组中的按钮有关。

要解决此问题，只需从按钮组中删除 data-toggle="buttons" 即可。通过删除 data-toggle 属性，bootstrap js 不应用，vue 可以管理按钮组。

Vue v-model 对 BS4 单选按钮组没有反应

Vue v-model not reactive with BS4 radio button group

vue.js

radio-button

vuejs2

bootstrap-4

buttongroup