我希望我只是错过了一些简单的东西,因为我已经看了太久了,但我很难过。
我有一个输入绑定到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>
?
关于我做错了什么和/或没有正确理解的任何想法?
非常感谢!
答案 0 :(得分:6)
非常感谢@ebbishop的有用见解。
这个问题与vue和bootstrap都有关,他们试图将javascript应用到按钮组中的按钮。
要解决此问题,只需从按钮组中删除data-toggle="buttons"
即可。通过删除data-toggle属性,不会应用bootstrap js,vue可以管理按钮组。
答案 1 :(得分:1)