get element style and assign it to another element in vue.js

Question

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 ?!!!

Miguel Coder · Accepted Answer · 2017-07-30 11:24:23Z

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 computed 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

edited Jul 30, 2017 at 11:24

answered Jul 30, 2017 at 10:32

Miguel Coder

1,95721 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kalagar Over a year ago

Error in render function: "TypeError: Cannot read property 'userPanelMainContents' of undefined"

Miguel Coder Over a year ago

I'll edit it and fix it for you. I think what is happening is that the refs are being created after the computed.

Kalagar Over a year ago

i use *.vue file and webpack. is it possible this structure make this situation ?

Miguel Coder Over a year ago

It all gets compiled down to es2015. That's shouldn't cause the problem. I use *.vue and webpack all of the time.

Kalagar Over a year ago

unfortunately doesn't word !!

Collectives™ on Stack Overflow

get element style and assign it to another element in vue.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related