当elementui的el-dialog组件中包含子组件时，用refs调用子组件时的undefined问题
当elementui的el-dialog组件中包含子组件时，用refs调用子组件时的undefined问题
李维亮
发布于 2021-07-08 10:08:40
发布于 2021-07-08 10:08:40
文章被收录于专栏：李维亮的博客
今天用elementui写了一个el-dialog组件里面包着一个el-transfer穿梭框组件， 代码
<!--推荐服务-->
<el-dialog title="提示" :visible.sync="dialogVisible" width="704px" :before-close="handleClose">
<el-transfer ref="recommendation" v-model="addInterfaceBigClass.recommendInterface" :data="getModelList" :titles="['未添加','已添加']" filterable :button-texts="['删除', '添加']" style="min-height: 400px;"></el-transfer>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelInterfaceRecommend">取 消</el-button>
<el-button type="primary" @click="saveInterfaceRecommend">确 定</el-button>
</span>
</el-dialog>然后发现通过$refs第一次调用el-transfer绑定的ref的时候，发现第一次调用的时候提示报错
VM37583:37 [Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'clearQuery' of undefined"
02.png
经过思考感觉应该是js加载机制或者是 el-dialog 渲染顺序的延时造成的，所以我就在调用的方法里面加个setTimeout
setTimeout(() => {
this.$refs.recommendation.clearQuery('left');
this.$refs.recommendation.clearQuery('right');
},0);最后完美解决undefined问题
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-09-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
