Cannot read property ‘setRules‘ of undefined“found in，u-popup u-form 规则失效问题解决方案

会玩代码的猫2024-03-01 21:48

html 复制代码

<template>
	<u-popup closeable border-radius="28" @close="close" mode="bottom" height="80%" v-model="show">

		<div class="wrapper">
			
			<div>
				<u-form :model="submitData" ref="uForm" label-position="left" :rules="ruleInline" :label-width="180">

						<u-input v-model="submitData.procureAccount"></u-input>
					</u-form-item>
				</u-form>

			</div>
		</div>
	</u-popup>
</template>

我们在methods 中写一个函数

javascript 复制代码

open() {
				this.show = true
				this.$nextTick(() => { //在弹窗加载出来只有 show 才会变成 true
					this.$refs.uForm.setRules(this.ruleInline);
				})
				
			},

然后在调用这个组件的时候，点击某个地方，通过ref得到就内部函数就可以了，

切记open()中show=true，要在最上面

javascript 复制代码

<invoices ref="invoices" :res="receiptList" @callbackInvoice="callbackInvoice" />

javascript 复制代码

// 判断发票
			invoice() {
				this.$refs.invoices.open()
				// this.invoiceFlag = true;
			},

本人实测没有问题，分享给大家，写的比较粗糙，还望海涵，有问题，评论区留言，有更好的方法，评论区可以评论一下，大家一起探讨，有用的话麻烦点个赞，谢谢各位同仁！！！