uniapp u-popup 弹窗内嵌套 from 表单组件报错规则找不到

<u-popup mode="center" v-model="show">
        
        <view class="" style="padding: 30upx;">
            <u-form :model="form" ref="uForm" >
                <u-form-item label="所属章节" prop="chapterId" >
                    <u-button size="mini" @click="openTree()">打开章节选择</u-button>
                    <tki-tree ref="tkitree" :selectParent="true" :range="chapterList" rangeKey="name" @confirm="selectAsc" confirmColor="#4e8af7"/>
                </u-form-item>
                
            </u-form>
            <view class="" style="display: flex;">
                <u-button size="mini" @click="submit">提交</u-button>
                <u-button size="mini" style="margin-left: 20upx;" @click="resetSubmit">取消</u-button>
            </view>
        </view>
        
    </u-popup>

data 规则

show :false,
form :{},
        
        rules:{
            chapterId: [
                { 
                    required: true, 
                    message: '请选择章节', 
                    // 可以单个或者同时写两个触发验证方式 
                    trigger: ['change'],
                }
            ],
        },

 

 

如上面的代码所示，弹窗内嵌套了一个表单组件，这个时候如果根据官方文档去写 在 onReady 加载表单规则，就会报错提示 找不到表单组件，加载不了。

也就是  Cannot read properties of undefined (reading 'setRules')  

打印 this.$refs.uForm 会出现 undefined，如下图所示

 

 

 

这个时候只需要写一个watch 监听 u-popup 加载速度即可

watch:{
        // this.$refs.uForm.setRules(this.rules);
        show:{
            
            handler(value){
                
                this.$nextTick(()=>{ //在弹窗加载出来只有 show 才会变成 true
                    
                    if( value == true ){ //判断 弹窗 v-model 变成 true 的时候去加载规则。 原理：在弹窗渲染完成之后表单渲染完成之前去加载规则就不会报错了

                        this.$refs.uForm.setRules(this.rules);
                    }
                    
                })
                
            },
            
        },
        immediate: true, // 重点
        deep: true, // 重点
        
    },