鍍金池/ 問答/HTML5  Java  HTML/ 使用vue和bootstrap實現(xiàn)輪播時出現(xiàn) Cannot read prope

使用vue和bootstrap實現(xiàn)輪播時出現(xiàn) Cannot read property 'offsetWidth'報錯

使用vue和bootstrap實現(xiàn)輪播時出現(xiàn) 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:
// 輪播數(shù)字模板

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
        })
    }
})
回答
編輯回答
晚風眠

輪播的時候可能里列表里沒有加載出項目;
造成 li數(shù)量為 0,li 沒有, offsetWidth肯定報錯;
可以先添加一個判斷 <lunbo-img>是否為 0,再計算。

2017年5月22日 22:43