模态表单重新打开时验证错误仍然存​​在

Question

关于问题

我使用的是Laravel 5.6.7，Vue.js.我有模态div，按下按钮打开和关闭。我打字了。验证火灾。我关闭模态div。然后单击按钮将其打开。我看到验证消息仍在那里。

组件模板

<template>
    <div>
        <form role="form">
            <input name="LastName" type="text" ref="LastName" v-validate 
                                    data-vv-rules="required" v-model="createForm.LastName">

            <p v-if="errors.has('LastName')">{{ errors.first('LastName') }}</p>

            <button v-else type="button" @click="validateBeforeSubmit()">
                Create
            </button>
        </form>
    </div>
</template>

组件脚本

<script>
    export default {
        data() {
            return {
                createForm: {
                    LastName: ''
                }
            };
        },
        created() {
            this.InitializeForm();
        },
        methods: {
            InitializeForm() {
                this.createForm.LastName = "";                
            },
            validateBeforeSubmit() {
                this.$validator.validateAll();
            }
        }
    }
</script>

我的发现

如果检查上面的输入类型文本，我添加了ref属性。尝试使用以下代码将aria-invalid属性的值设置为false。

this.$refs.LastName.setAttribute("aria-invalid", "false");

它设置了属性值，但验证错误仍然存​​在。有没有什么方法可以摆脱上面的变通方法？

我认为，当我设置第一个值或点击它时......正在设置一些属性值，并且由于该形式错误发生。

Answer 1

假设您使用的是vee-validate，

要清除所有错误，

this.$validator.errors.clear();

仅清除1个错误，

this.$validator.errors.remove('LastName');

将上面的代码中的一个添加到模态关闭事件侦听器中，下次打开它时错误就会消失。