常州网络公司网站,上海电子商务网站,鲜花网站建设店,wordpress能用手机管理吗项目中引用了一个UI组件库#xff0c;在表单上添加了ref属性#xff0c;方便提交时验证。触发提交方法时显示不存在这个方法或this.$refs为undefined。
u--form labelPositionleft :modeluserInfo :rulesrules refloginForm在表单上添加了ref属性方便提交时验证。触发提交方法时显示不存在这个方法或this.$refs为undefined。
u--form labelPositionleft :modeluserInfo :rulesrules refloginFormu-form-item label账号 propname borderBottom refusernameu--input v-modeluserInfo.name placeholder请输入账号 bordersurround/u--input/u-form-itemu-form-item label密码 proppassword borderBottom refpasswordu--input v-modeluserInfo.password placeholder请输入密码 bordersurround typepassword/u--input/u-form-itemdiv classloginBtnu-button typeprimary clickloginApp登录/u-button/div
/u--form
解决方法
引入getCurrentInstance,t得到当前组件实例然后用ctx.$refs代替this.$refs。这里的ctx相当于全局this。
script setupimport { getCurrentInstance } from vue// 获取当前组件实例const { ctx } getCurrentInstance();function loginApp() {ctx.$refs.loginForm.validate().then(res {uni.$u.toast(校验通过)}).catch(err {uni.$u.toast(校验失败)})}script
