uni-app form 里面设置 $ref 报错

uni-app form 里面设置 $ref 报错

开发环境 版本号 项目创建方式
Mac 10.15.7 HBuilderX 
### 示例代码：

```html
<u-form :model="form" ref="uForm">
<u-form-item label="手机" prop="mobile">
<u-input v-model="form.mobile" class="u-border-bottom"/>
</u-form-item>
</u-form>  

this.$refs.uForm.setRules(this.rules);

操作步骤：

onReady() {
this.$refs.uForm.setRules(this.rules);
},

预期结果：

正常


### 实际结果：

Error in onReady hook: "TypeError: Cannot read property 'setRules' of undefined"

bug描述：

代码：

this.$refs.uForm.setRules(this.rules);

提示报错 Error in onReady hook: “TypeError: Cannot read property ‘setRules’ of undefined”


更多关于uni-app form 里面设置 $ref 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

19 回复

我也是这个问题，解决了没

更多关于uni-app form 里面设置 $ref 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不知道自己是不是穿越了，忘记在哪里看到的说是要在onReady()里写this.$refs.uForm.setRules(this.rules); 自己后来遇到的时候在onReady()怎么写都报错"TypeError: Cannot read property ‘setRules’ of undefined"。 但是在mounted()里没问题。

没用啊，有解决方案了么，我直接创建hello uniapp的项目，里面的就没问题

一样的问题，有解决方法了么

求问，解决了吗？

都2023年了，这个问题还在，笑死人了 Error in onReady hook: “TypeError: Cannot read property ‘setRules’ of undefined”

俺也碰到这个问题了

提供下测试工程

也碰到这问题

不要取同组件名字相同的ref

回复 靐齉齾麤龖龗: ref名称改了也还是一样报undefine

回复 8***@qq.com: 截图看看呢。。或者你把你的代码贴出来

回复 靐齉齾麤龖龗: const skuForm = ref() const skuRules = ref({ price: { rules: [ { required: true, errorMessage: ‘请填写产品价格’ }, { validateFunction: function (rule: any, value: any, data: any, callback: any) { if (value < productStore.product!.minPrice!) { callback(‘所填价格低于最低起售价’ + ${productStore.product!.minPrice!}元) } return true }, }, ], }, }) onReady(() => { skuForm.value.setRules(skuRules.value) }) <uni-forms :model="skuInfo" ref="skuForm" :rules="skuRules" validate-trigger="blur"> <uni-forms-item label="价格" name="price"> <uni-easyinput v-model.number="skuInfo.price" type="number" placeholder="请填写产品价格" /> </uni-forms-item> </uni-forms> 大致这样

回复 8***@qq.com: 你是哪个端的啊？是mac系统还是windows系统的呢？

回复 靐齉齾麤龖龗: windows

回复 8***@qq.com: 编译到哪个端的呢

回复 靐齉齾麤龖龗: 解决了,有些表单项的name没有写在rules里面，导致校验不起作用，虽然还是报setRules undefined,但补全后校验起效了

回复 靐齉齾麤龖龗: 小程序

这是因为在 onReady 生命周期中，组件可能还未完全挂载到 DOM 中，导致 $refs.uForm 为 undefined。uni-app 中推荐在 onReady 之后的生命周期或事件中操作 DOM 和组件引用。

解决方法：

  1. 使用 $nextTick 确保组件已渲染：
onReady() {
  this.$nextTick(() => {
    this.$refs.uForm.setRules(this.rules);
  });
}
  1. 在 mounted 生命周期中设置规则（如果组件已挂载）：
mounted() {
  this.$refs.uForm.setRules(this.rules);
}
回到顶部