在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ v-for 獲取不到Dom節(jié)點的高度

v-for 獲取不到Dom節(jié)點的高度

用的element-ui的框架的跑馬燈組件，需求是獲取img的高度，打印出來是Undedined，這是為什么？

代碼如下：

<el-carousel arrow = 'always' indicator-position = "none" :height = heightNum>

<el-carousel-item v-for = "(item,index) in items" :key = "item">
     <img :src = "item.bannerImgSrc" alt="" :ref = "item.name" @click = "setActiveItem(index)"/>
</el-carousel-item>

</el-carousel>

data () {

return {
    items:[
        {bannerImgSrc:'static/image/icon/banner01.png',name:'a'},
        {bannerImgSrc:'static/image/icon/banner02.png',name:'b'},
        {bannerImgSrc:'static/image/icon/code01.png',name:'c'},
        {bannerImgSrc:'static/image/icon/code02.png',name:'c'},
     ],
}

},

mounted () {

var y = this.$refs.b.offsetHeight;
console.log(y);

},

回答
編輯回答
玄鳥

mounted的時候還沒渲染，v-for之類的模板還在等數(shù)據(jù)處理，換句話說，數(shù)據(jù)得先經(jīng)過mounted，才會被v-for渲染，那么mouted的時候也就拿不到了。

mouted之后立即去取也有可能是0，因為img剛開始加載，可能還沒有確定大小

2018年5月3日 00:01
編輯回答
冷咖啡

當(dāng)前組件掛載了，但你的跑馬燈組件還不一定掛載。
試試 nextTick里獲取。

mounted () {

    this.$nextTick(() => {
        var y = this.$refs.b.offsetHeight;
        console.log(y);
    });
},
2018年6月5日 08:35
編輯回答
葬愛

這個問題，我碰到過，已經(jīng)解決了，具體方案請移步-> Vue中mounted鉤子函數(shù)獲取節(jié)點高度出錯

2018年8月27日 15:28