时间戳

首页 > 解决方案 > 如何在 vuejs 中验证 b-form-radio-group 中的单选按钮

vue.js - 如何在 vuejs 中验证 b-form-radio-group 中的单选按钮

问题描述

我有一个 b-form-radio-group 单选按钮，我如何验证它们，因为其中一个必须检查？

这是 b-modal 内的 b-form-radio-group 的 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-modal 应该会警告我。

标签： vue.jsbootstrap-vue

解决方案

您需要添加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-feedback-example

推荐阅读