v-for 获取不到Dom节点的高度

Question

用的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);

},

Answer 1

当前组件挂载了，但你的跑马灯组件还不一定挂载。
试试 nextTick里获取。

mounted () {

    this.$nextTick(() => {
        var y = this.$refs.b.offsetHeight;
        console.log(y);
    });
},

Answer 2

mounted的时候还没渲染，v-for之类的模板还在等数据处理，换句话说，数据得先经过mounted，才会被v-for渲染，那么mouted的时候也就拿不到了。

mouted之后立即去取也有可能是0，因为img刚开始加载，可能还没有确定大小

Answer 3

这个问题，我碰到过，已经解决了，具体方案请移步-> Vue中mounted钩子函数获取节点高度出错