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)