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

【问题标题】：Modal form Validation errors persist when reopened重新打开时，模态表单验证错误仍然存在
【发布时间】：2018-09-09 07:12:15
【问题描述】：

关于问题

我正在使用 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");

它设置了属性值，但验证错误仍然存在。是否有任何适当的方法可以摆脱上述变通方法？

我认为，当我设置第一个值或单击它时...正在设置某些属性值，因此会出现表单错误。

【问题讨论】：

标签： vue.js laravel-5.6

【解决方案1】：

假设您使用的是 vee-validate，

要清除所有错误，

this.$validator.errors.clear();

仅清除 1 个错误，

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

在模态关闭事件监听器中添加上面的代码1，下次打开时错误就会消失..

【讨论】：