CODEWITHSUNDEEP
javascriptjqueryhtmlcssvue.js
Kalagar
Kalagar

Reputation: 379

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

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

Upvotes: 2

Views: 14267

Answers (1)

Miguel Coder
Miguel Coder

Reputation: 1949

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

Upvotes: 1

Related Questions