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

Posted 2023-03-21

【中文标题】Vue v-model 不响应 BS4 单选按钮组

【英文标题】：Vue v-model not reactive with BS4 radio button group

【发布时间】：2018-08-31 01:09:47

【问题描述】：

我希望我只是错过了一些简单的东西，因为我已经看这个太久了，但我很难过。

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

但我正在尝试将单选按钮更改为 Bootstrap 4 按钮组，但似乎无法使 v-model 绑定工作。无论我尝试什么，当我单击按钮组中的任何一个按钮时，我的 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>？

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

非常感谢！

【参考方案1】：

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

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

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

【讨论】：

感谢上帝，我以为我会发疯。

非常感谢。我刚刚开始根据我的需要调整 vue-bootstrap（这很头疼），但我所要做的就是删除该属性。

还需要将其添加到标签中：v-bind:class=" active: isActive "

【参考方案2】：

您在此处使用v-model 实际上并没有错。

但是：您必须将类 "active" 添加到包装每个单选按钮 <input> 的 <label>。

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

这就是你所追求的吗？

【讨论】：

感谢ebbishop！您的输入很有帮助，尤其是在为项目编辑加载表单时自动选择按钮组中的按钮。但不幸的是，添加“活动”类不会影响 vue 模型未绑定到单选按钮字段的更大问题。点击按钮组中的一个按钮仍然不会更新vue实例数据中的gender_id。

@CICSolutions：看看小提琴中的标题内容 - 显示的数字 是 gender_id。 gender_id 也是驱动类绑定的原因。

啊……很棒的小提琴，谢谢。嗯...我的代码是正确的，并且与小提琴中的内容相匹配，因此问题必须在此代码之外。我有一个更大、更复杂的表单，但它没有抛出任何 js 错误。奇怪...我的按钮组在没有类绑定的情况下单击“活动”类，但如果我删除小提琴中的类绑定，按钮不会保持突出显示。我非常感谢您的洞察力和帮助。我将不得不继续挖掘以找到模型变量没有绑定的根本原因，就像它在你的小提琴中一样。谢谢@ebbishop！

哦@ebbishop，我看到你没有在你的小提琴中拉入 bootstrap.js。也许我的问题包括 bootstrap.js 和 bootstrap.js 和 vue.js 之间的功能冲突？我会试试看:)

是的，这似乎是问题所在。如果我将标准 jquery、popper 和 bootstrap javascript 库拉到你的小提琴中，模型绑定就会停止工作。罪魁祸首是 jquery 库。删除后，模型绑定再次开始工作。 jsfiddle.net/3e9ax7sy/19 非常感谢 @ebbishop 帮助我学习如何更好地调试！