当elementui的el-dialog组件中包含子组件时，用$refs调用子组件时的undefined问题

最新推荐文章于 2024-06-23 19:33:11 发布

swatyb

最新推荐文章于 2024-06-23 19:33:11 发布

阅读量1k

点赞数

分类专栏： vue element

原文链接：https://blog.youkuaiyun.com/zaocha321/article/details/103362729

版权

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

element

2 篇文章

订阅专栏

本文探讨了在Element UI的el-dialog弹框中嵌套子组件时，如何正确设置子组件属性并避免`fileList` undefined错误。作者分享了两种处理方法，包括使用$nextTick或setTimeout确保数据更新后再操作子组件，并提醒了关于数据绑定时机的重要性和赋值来源的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui的el-dialog弹框组件中包含了一个子组件。

<el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" width="60%">
      <el-form :rules="rules" ref="dataForm" :model="dataForm" label-position="right" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="this.$t('logisticsUser.businessLicense')" prop="businessLicense">
              <v-singleImage ref="imageLicense" imageType=1></v-singleImage>
            </el-form-item>
          </el-col>

然后我通过$refs为该子组件里面的属性赋值，在控制台上却显示undefined。

handleWatch(idx) {
        let imgFileList = []
        const ctxPath = process.env.BASE_API;
 
        logisticsUserApi.queryOne(idx).then(res=>{
          this.dataForm = Object.assign({}, res.data.data);
          imgFileList.push({name: res.data.data.businessLicenseImagePath, url: ctxPath +"/attachment/downloadAttachmentFile?filePath="+ res.data.data.businessLicenseImagePath})          
        });
        this.watchDialogFormVisible = true
        
        this.$refs.imageLicenseWatch.fileList = imgFileList
        //查看时，上传图片按钮不可操作
        this.$refs.imageLicenseWatch.showdisabled = true
        //查看时，不显示上传控件
        this.$refs.imageLicenseWatch.uploadDisabled='disabled'

报错如下：

errorLog.js:17 TypeError: Cannot set property 'fileList' of undefined
    at VueComponent.handleWatch (index.vue?52f4:411)
    at Proxy.boundFn (vue.esm.js:188)
    at click (index.vue?8790:431)
    at VueComponent.invoker (vue.esm.js:1997)
    at VueComponent.Vue.$emit (vue.esm.js:2507)
    at VueComponent.handleClick (element-ui.common.js:9560)
    at boundFn (vue.esm.js:188)
    at invoker (vue.esm.js:1997)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js:1795) "event handler for "click""

还有一个坑：this.watchDialogFormVisible = true 要写在前面否则会报错

errorLog.js:17 TypeError: Cannot set property 'fileList' of undefined
    at VueComponent.<anonymous> (index.vue?52f4:403)
    at Array.<anonymous> (vue.esm.js:1806)
    at MessagePort.flushCallbacks (vue.esm.js:1727) "nextTick"

还有一个坑：imgFileList 变量的赋值要使用 res.data.data ，如果使用 this.dataForm 赋值，你会发现this.dataForm为null。

下面附上正确的写法：

方法一：利用 this.$nextTick(function(){ 实现：

handleWatch(idx) {
        let imgFileList = []
        const ctxPath = process.env.BASE_API;
 
        logisticsUserApi.queryOne(idx).then(res=>{
          this.dataForm = Object.assign({}, res.data.data);
          imgFileList.push({name: res.data.data.businessLicenseImagePath, url: ctxPath +"/attachment/downloadAttachmentFile?filePath="+ res.data.data.businessLicenseImagePath})          
        });
        this.watchDialogFormVisible = true
 
        this.$nextTick(function(){
          this.$refs.imageLicenseWatch.fileList = imgFileList
          //查看时，上传图片按钮不可操作
          this.$refs.imageLicenseWatch.showdisabled = true
          //查看时，不显示上传控件
          this.$refs.imageLicenseWatch.uploadDisabled='disabled'  
        })

方法二：利用 setTimeout(()=>{ 实现：

handleWatch(idx) {
        let imgFileList = []
        const ctxPath = process.env.BASE_API;
 
        logisticsUserApi.queryOne(idx).then(res=>{
          this.dataForm = Object.assign({}, res.data.data);
          imgFileList.push({name: res.data.data.businessLicenseImagePath, url: ctxPath +"/attachment/downloadAttachmentFile?filePath="+ res.data.data.businessLicenseImagePath})          
        });
        this.watchDialogFormVisible = true
        setTimeout(()=>{
          this.$refs.imageLicenseWatch.fileList = imgFileList
          //查看时，上传图片按钮不可操作
          this.$refs.imageLicenseWatch.showdisabled = true
          //查看时，不显示上传控件
          this.$refs.imageLicenseWatch.uploadDisabled='disabled' 
        },0)