模式表单验证错误在重新打开时持续存在

关于问题

我使用的是Laravel 5.6.7,Vue。js。我有一个模态div,点击按钮即可打开和关闭。我输入了一些东西。验证激发。我关闭modal 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属性。尝试使用以下代码将的值设置为false aria-invalid 属性

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

它设置属性值,但仍存在验证错误。有没有什么合适的方法来摆脱上述的变通方法?

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