i am using VUE.js 2

this is my DOM:

<aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside>

<main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents">...</main>

and this is my script:

export default {
    data() {
        return {}
    },
    methods: {
        height () {
            return this.$refs.userPanelMainContents ? this.$refs.userPanelMainContents.offsetHeight + 'px' : '0px'
        }
    }
}

i want to get userPanelMainContents height and asign it to aside tag. how can i do that ?!!!

i am using VUE.js 2

this is my DOM:

<aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside>

<main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents">...</main>

and this is my script:

export default {
    data() {
        return {}
    },
    methods: {
        height () {
            return this.$refs.userPanelMainContents ? this.$refs.userPanelMainContents.offsetHeight + 'px' : '0px'
        }
    }
}

i want to get userPanelMainContents height and asign it to aside tag. how can i do that ?!!!

• javascript
• jquery
• html
• css
• vue.js

Share Improve this question Follow asked Jul 30, 2017 at 9:43 KalagarKalagar 37922 gold badges66 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Try returning a data property instead of using a method to return the height, and then you can set the height with the mounted function.

Like so:

<aside :style="{ height: height }" class="col-sm-4 col-md-3 col-lg-3">...</aside>

<main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents">...</main>


export default {
    data() {
        return {
            height: '0px'
        }
    },
    mounted () {
        this.height = this.$refs.userPanelMainContents[0].style.height;
    }
}

EDITED: changed the puted to a data property and set it when the mounted event is called.

It's going to use a different syntax because I can't use .vue files on codepen, but here is the working code.

https://codepen.io/michael_coder/pen/qXbxXW