【uni-app使用uviewUI u-popup弹窗中使用el-form表单校验报错】

最新推荐文章于 2024-10-16 17:28:29 发布

b360

最新推荐文章于 2024-10-16 17:28:29 发布

阅读量267

点赞数 4

分类专栏：前端 # uni-app 文章标签： uni-app vue

本文链接：https://blog.csdn.net/qq_45347890/article/details/136856108

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

uni-app

1 篇文章 0 订阅

订阅专栏

@[TOC]( uni-app使用uviewUI u-popup弹窗中使用el-form表单校验报错：Error in onReady hook: “TypeError: Cannot read properties of undefined (reading ‘setRules’)” TypeError: Cannot read properties of undefined (reading ‘setRules’) )

报错截图

onReady 报错

在这里插入图片描述

点击修改按钮报错

在这里插入图片描述

问题源代码

<u-icon name="arrow-right" size="14" color="#DADADA" @click="open()"></u-icon>

<u-popup :show="show.updatePayPWD" @close="show.updatePayPWD = false" >
	<view class="form-box">
    <u--form labelPosition="left" :model="model2" ref="form1">
		<u-form-item label="原密码" prop="oldPayPassword">
            <input v-model="oldPayPassword" :maxlength="6" class="form-item-password__input" placeholder="请输入原密码" />
		</u-form-item>
	</u--from>
	<u-button type="info" text="修改" @click="submit()"></u-button>
    </view>
</u-popup>

export default {
	data(){
		return {
			model2: {
				oldPayPassword: '',
			},
			rules: {
		        payPassword: {
		          type: 'string',
		          required: true,
		          message: '请填写支付密码',
		          trigger: ['blur', 'change'],
		    	},
		    },
		};
	},
	onReady() {
    	// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
    	this.$refs.form1.setRules(this.rules)
  	},
  	methods: {
  		open() {
  			this.show.updatePayPWD = true
  		},
  		submit() {
  			this.$refs.form1.validate().then(res => {
				uni.$u.toast('校验通过')
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
  		},
  	}
}

正确的写法

onReady() {
    	// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
    	// this.$refs.form1.setRules(this.rules)
},
methods: {
  		open() {
  			this.show.updatePayPWD = true
  			setTimeout(() => {
        		this.$refs.form1.setRules(this.rules)
      		}, 500)
  		},
 }