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

Question

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

<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
    },
}

Answer 1

我又看了一遍文档，找到了解决办法。我添加这个 bvModalEvt.preventDefault()

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

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

Modal is closing after submit form even if I have errors Vuejs

vue.js

vuejs2

bootstrap-vue

vuelidate