Set element height based on parent height in vue js on page load

Question

I want to set the height of a vue component (to be specific it is this -> https://github.com/jbaysolutions/vue-grid-layout).

The height of which (in vue-grid-layout -> grid-item) should be same as of its parent.

And this also should be only in page load time. So how this can be achieved in vue js?

I don't want to do this using CSS. I need height in pixels. as to vue-grid-layout -> item height needs in pixel initially. as it is resizable, it can be changed afterwards.

Solution

it would be easier to provide an accurate answer with some example html (your actual code), but the following should work in general.

export default {
    ...
    data() {
        return {
            parentHeight: 0
        }
    },
    mounted() {
        this.parentHeight = this.$parent.$el.offsetHeight;
    }
    ...
}

So in the mounted lifecycle hook you can read the height of the parent and then set it where ever you need it.

Comments

[Ferrybig]

Can't you use css for this? height: 100%?

[Hello World]

added last line in question.

[Hello World]

Hi @Ferrybig. I have updated question and added last line.