我有一个b-form-radio group的无线电按钮,我该如何验证它们,因为必须检查其中一个?
这是B-模式内的B形 - 拉迪奥组的一个div
<b-modal id="manageQuantity" title="Manage Quantity" @ok="updateQuantity">
<div class="radio-button">
<b-form-group
id="quantityOption"
label-cols-sm="3"
label="Option :"
label-for="input-horizontal"
>
<b-form-radio-group
id="quantityOption"
class="individual-button"
buttons
button-variant="outline-secondary"
v-model="form.quantityOption"
:options="quantityOptions"
></b-form-radio-group>
</b-form-group>
</div>
</b-modal>
当我单击"确定"按钮时,如果我没有选择任何单选按钮,则B-模式应警告我。
您需要添加state
属性。您还可以将b-form-invalid-feedback
b-form-valid-feedback
插槽用于消息:
<b-form-radio-group
id="quantityOption"
class="individual-button"
buttons
button-variant="outline-secondary"
v-model="form.quantityOption"
:options="quantityOptions"
:state="state"
>
<b-form-invalid-feedback :state="state">Please select one</b-form-invalid-feedback>
<b-form-valid-feedback :state="state">Thank you</b-form-valid-feedback>
</b-form-radio-group>
....
data(){
return{
form:{
quantityOption: null
}
}
}
...
computed: {
state() {
return Boolean(this.form.quantityOption)
}
}
...
您可以在文档中找到更多信息:https://bootstrap-vue.js.org/docs/components/form-radio/#contextual-state-with-with-feedback-feedback-example
在您的updateQuantity
方法中您可以检查您的quantityOption
是否设置。
您还可以实现Andriy的答案以进行更多的视觉表示,但是您仍然需要检查该事件的检查以确保是否设置。
<div>
<b-btn v-b-modal.modal>Open Modal</b-btn>
<b-modal id="modal" @ok="updateQuantity">
<b-form-radio-group
buttons
button-variant="outline-secondary"
v-model="form.quantityOption"
:options="quantityOptions"
></b-form-radio-group>
</b-modal>
</div>
<script>
data() {
return {
form: { quantityOption: null },
quantityOptions: [
{value: 1, text: '1' },
{value: 2, text: '2' },
{value: 3, text: '3' }
]
}
},
methods: {
updateQuantity(event) {
if(!this.form.quantityOption){
alert('Please select one of the options first')
event.preventDefault()
}
}
}
</script>