弹框和表格是写在一个页面里的。现在要检验这个弹框中的表单项,用自己写校验函数的方式进行校验,
校验表单vue3项目在<script setup>标签里面写rules={},const checkName =()=>{},自定义校验函数,会报错,提示你写的这个checkName函数在组件初始化之前不能访问。
ReferenceError: Cannot access 'checkName' before initialization
原因是:
setup是在挂载之前执行的,你把自定义校验函数写在setup标签的第1层,页面挂载的时候,表格显示了,但是你的弹框是不显示的,此时你的弹框组件是没有挂载的也就是没有初始化,但你的弹框是绑定了rules对象的,rules对象中写了自定义函数checkName。你在弹框没有初始化的情况下在setup中执行了自定义校验函数,在组件初始化之前不能访问自定义函数,你要在弹框初始化之后,才能访问这个自定义函数
解决方法:
可以先在setup中写一个响应式的空对象rules=ref({})
在点击新增弹框按钮的时候,在新增事件中,将规则对象赋值给rules空对象,这样新增时弹框显示已经初始化了,也就可以访问自己写的自定义函数了
在规则对象中写validator:()=>{}
这样就不会报错了