Vue v-model不与BS4单选按钮组反应

Question

我希望我只是错过了一些简单的东西,因为我已经看了很久了,但我很难过.

我有一个输入绑定到vuejs的表单.我有一组2个单选按钮用于选择"性别",绑定工作正常.如果我单击任一单选按钮,我可以在vue组件检查器中看到数据更改.

但我正在尝试将单选按钮更改为Bootstrap 4按钮组,并且似乎无法使v模型绑定工作.无论我尝试什么,当我点击按钮组中的任何一个按钮时,我的vue数据中的gender_id都没有得到更新.

表单输入值通过vue组件属性输入,但为简单起见,单选按钮/按钮组的数据如下所示:

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

在按钮组的文档中,它们甚至不包括无线电输入的value属性,而它们确实包含在表单单选按钮的文档中. https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios

这是为了简单,还是按钮组的单选按钮甚至不返回选中按钮的值？

我看到其他线程声明按钮组不能用作单选按钮,但如果BS4也是如此,那么为什么Bootstrap的按钮组带有单选按钮,就像它们在上面引用的文档中一样？如果您无法检索已检查状态,那么为什么不使用？<button>而不是<label><input type=radio></label>？

关于我做错了什么和/或没有正确理解的任何想法？

非常感谢!

Answer 1

非常感谢@ebbishop的有益见解.

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

要解决这个问题,就像data-toggle="buttons"从按钮组中删除一样简单.通过删除data-toggle属性,不应用bootstrap js,vue可以管理按钮组.