使用vue和bootstrap实现轮播时出现 Cannot read property 'offsetWidth'报错

Question

使用vue和bootstrap实现轮播时出现 Cannot read property 'offsetWidth'报错，但不影响使用，请大神帮忙看一下是怎么回事。链接描述

链接左上角附有源代码包，希望大神帮忙看看

---

<!-- 代码-->

<div id="Carousel_1" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators">
                <li v-for="(item,index) in items" :data-slide-to="index" :class="{'active':index==0}" data-target="#Carousel_1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <lunbo-img v-for="(item,index) in items"
                           v-bind:todo="item"
                           v-bind:index="index"
                           ></lunbo-img>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#Carousel_1" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#Carousel_1" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        

---

js：
// 轮播数字模板

Vue.component('lunbo_num',{
    template:"#lunbo_num",
});

//轮播图片模板
Vue.component('lunbo-img',{
    props:['todo','index'],
    template:"#lunbo_img",
})

//轮播
var Carousel_1 = new Vue({
    el:"#Carousel_1",
    data:{
        items:[
            {
                alt:"我是第一张图片",
                img:"img/lunbo01.jpg",
                h1:"我是第一张图片",
                p:"this is the first photo"
            },
            {
                alt:"我是第二张图片",
                img:"img/lunbo02.jpg",
                h1:"我是第二张图片",
                p:"this is the second photo"
            },
            {
                alt:"我是第三张图片",
                img:"img/lunbo03.jpg",
                h1:"我是第三张图片",
                p:"this is the third photo"
            },
        ]
    },
    mounted(){
        $('.carousel').carousel({
            interval: 2000
        })
    }
})

Answer 1

轮播的时候可能里列表里没有加载出项目；
造成 li数量为 0，li 没有， offsetWidth肯定报错；
可以先添加一个判断 <lunbo-img>是否为 0，再计算。

Answer 2

兄台，我也遇到了你的问题，请问解决了吗