Javascript Vue表单验证问题

我正在尝试使用vue构建我自己的简单表单验证（以laravel表单验证为模型），我计划将其用于当前正在工作的项目中

我的问题很特别，当我单击submit按钮时，表单验证错误不会显示，但当我右键单击任何输入元素并选择inspect元素时，错误就会显示，如下所示

之前

之后

我已经用chrome和firefox测试过了，它们都显示了相同的问题，并且在任何浏览器控制台中都没有代码错误

当前正在使用的代码文件是

Demo.vue

{{errors.get（'username'）| | errors.get（'message'）}
{{errors.get（'password'）}
登录
从“@/mixins/form”导入formMixin；
导出默认值{
名称：“演示”，
mixin:[formMixin]，
数据（）{
返回{
表格：{
用户名：“”，
密码：“”，
},
规则：{
用户名：“必需”，
密码：“必需”，
},
};
},
方法：{
提交（）{
这个。validate（）；
if（this.errors.any（））{
返回；
}
},
},
};

mixins/form.js

从“lodash”导入； 从“@/utils/Errors”导入错误； 导出默认值{ 数据（）{ 返回{ 错误：新错误（）， }; }, 方法：{ getLabel（字段）{ 让fieldLabel=null； if（this.labels&&this.labels[字段]）{ fieldLabel=this.labels[field]； } 返回字段标签； }, HandlerRequired（字段、值）{ 让label=this.getLabel（字段）； const message=`${label？label:'字段'}是必需的`； 如果（！值）{ this.errors.set（字段、消息）； } }, 过程（）{ Object.keys（this.rules）.forEach（（key）=>{ this.rules[key].split（“|”）.forEach（（rule）=>{ this[`handle${{.startCase（rule）}`]（key，this.form[key]）； }); }); }, 验证（）{ 这个过程（）； }, }, }; utils/Errors.js

导出默认类错误{
构造函数（）{
this.errors={}；
}
任何（）{
返回Object.keys（this.errors）.length>0；
}
has（字段）{
返回Object.prototype.hasOwnProperty.call（this.errors，字段）；
}
设置（字段，错误）{
this.errors[字段]=错误；
}
获取（字段）{
if（此.errors[字段]）{
返回此的类型。错误[字段]='string'
？此。错误[字段]
：this.errors[字段][0]；
}
返回“”；
}
记录（错误）{
这个。错误=错误；
}
清除（字段）{
如果（字段）{
删除此。错误[字段]；
返回；
}
this.errors={}；
}
}

是什么导致了这一切

多谢各位