V-for cannot get the height of the Dom node

use the element-ui frame of the racing lantern component, the need is to get the height of the img, printed out is Undedined, this is why?

the code is as follows:

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

},

Apr.11,2021

the current component is mounted, but your racing lantern assembly may not be mounted yet.
try to get it in nextTick.

mounted () {

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

mounted is not rendered yet, and templates such as v-for are still waiting for data processing. In other words, the data has to go through mounted, before it is rendered by v-for, so it will not be available for mouted.

mouted will be fetched immediately or it may be 0, because img has just started to load and its size may not be determined yet


this problem, I have encountered, has been solved, the specific solution, please move-> Vue mounted hook function to get node height error

Menu