How to get the container height of content (including pictures) asynchronously in vue?

scenario is the effect of "read more" (the same effect as csdn blog posts). If the container content is higher than 1000px, the content outside 1000px is hidden, and the button "read more" is displayed. If the container content is not high enough, 1000px displays all the content.
contains images. I have tried that watch+nextTick, mounted+nextTick and updated+nextTick, can only obtain the height of the text, but the height of the image can never be obtained. How to obtain the true rendered height of the container?

or is there any other way to "read more" without judging the height of the content?

Mar.05,2021

text contains pictures? If the height of the image is determined, then you can calculate the height manually. If not, you have to traverse all the onLoad events in dom for img, listening to img, and then calculate the height after loading.


watch: {

namelist:function(){

    this.$nextTick(function(){
        console.log(this.$refs.elrow.$el.clientHeight)
        console.log(this.$refs.elrow)
    });
}

}


if you are getting height, you can create a new Image () object, which can be obtained manually after the onload event is triggered

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36245-2ad34.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36245-2ad34.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?