即使我有错误Vuejs，提交表单后模态也会关闭

Posted 2023-02-22

【中文标题】即使我有错误Vuejs，提交表单后模态也会关闭

【英文标题】：Modal is closing after submit form even if I have errors Vuejs

【发布时间】：2020-03-31 10:37:55

【问题描述】：

我使用vuelidate 创建了一个验证，但在我提交表单后，即使我有错误，模态也会关闭。我正在使用带有 VueJs 的 Bootstrap-Vue。如果提交后出现错误，我希望模型打开。

<b-modal
    v-bind="$attrs"
    title="Add new customer"
    @ok="addCustomer"
>

<form ref="form" @submit.stop.prevent>
    <b-form-group label="Account Name" label-for="account_name-input">
        <b-form-input
                id="account_name-input"
                v-model="account_name"
                v-model.trim="$v.account_name.$model"
                :class="
'is-invalid':$v.account_name.$error, 'is-valid':!$v.account_name.$invalid"
        ></b-form-input>
        <div class="invalid-feedback">
            <span v-if="!$v.account_name.required">This field is required!</span>
        </div>
    </b-form-group>
</form>

addCustomer() 
    if (this.$v.$invalid) 
        console.log('Error');
    else
        console.log("Succes");
        let newCustomer = 
            account_name: this.account_name,
        ;

        ...code...
    
,

validations: 
    account_name: 
        required
    ,

【参考方案1】：

我再次阅读了文档并找到了解决方案。 我加了这个bvModalEvt.preventDefault()

addCustomer(bvModalEvt) 
    if (this.$v.$invalid) 
        bvModalEvt.preventDefault()
        console.log('Error');
    else
...code...