Vuejs2.0的坑--Element UI 中的el-dialog包含子组件时,报错解决:TypeError: Cannot read property 'setActiveItem' of ...

真是坑,在el-dialog中使用el-carousel组件,想要动态修改幻灯片的当前激活的索引,element官网给出的文档写着可以用setActiveItem方法改变,但一直给我报setActiveItem这个方法undefined...调试了两个小时终于找到了原因:

html代码
<el-button type="primary" @click="showRemarkPic(2)" >改变索引</el-button>
<el-dialog 
  title="备注图片" 
  :visible.sync="dialogRemarkImg" 
  width="700px" 
  center>
    <el-carousel height="500px" :autoplay="false" ref="remarkCarousel">
        <el-carousel-item v-for="item in remark_pic" :key="item">
            <img :src="item" alt="图片"/>
        </el-carousel-item>
    </el-carousel>
</el-dialog>
js代码,原本我是这样写的
showRemarkPic: function (index) {
    var self = this;
    self.dialogRemarkImg = true;//显示弹框
    self.$refs.remarkCarousel.setActiveItem(index);
},

运行报错:Cannot read property 'setActiveItem' of undefined
然后就是悲剧的调试了两个小时,各种怀疑人生。。。。
打印了self.$refs.remarkCarousel输出undefined

console.log(self.$refs.remarkCarousel); //undefined

恍然大悟,可能是因为打开dialog的时候组件还未生成,用了一个延时函数setTimeout解决问题

js代码,下面是正确用法
showRemarkPic: function (index) {
    var self = this;
    self.dialogRemarkImg = true;//显示弹框
    setTimeout(function () {//等组件生成再调用setActiveItem(index);
        self.$refs.remarkCarousel.setActiveItem(index);
    }, 500);
},

果然是这个原因,解决问题

tips: 简书上交流可能会看不到消息,如有问题,欢迎进群交流50063010

end------------------------------------

推荐阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,009评论 1 22
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 8,482评论 1 52
  • 0. 写在前面 当你开始工作时,你不是在给你自己写代码,而是为后来人写代码。 —— Nichloas C. Zak...
    康斌阅读 4,950评论 1 41
  • 元旦抒怀 (2018-001) 文/王根林 时光荏苒 年轮已驶向了新途 此刻,站立岁月的节点 左手...
    老顽博凡阅读 277评论 2 3
  • 这是深圳台风擦边过境导致暴雨倾盆的第二次相同情况的大雨天气。 下班还是阴阴凉凉,加班一个钟,大雨就噼里啪啦下个没停...
    我还叫暴风阅读 100评论 0 0