位置:首页 > web前端 > vue

使用element中Carousel轮播组件时报 Cannot read properties of undefined (reading 'setActiveItem')" 错误的解决方案

dearweb 发布:2021-11-20 15:56:17阅读:

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

html代码

<el-button type="primary" @click="showRemarkPic(2)" >改变索引</el-button>
<div class="banner">
    <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>
</div>

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);
},

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

24人点赞 返回栏目 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看