in Vue.js, extract the style of an element and apply it to a different element

Question

in Vue.js, extract the style of an element and apply it to a different element

Currently, I am using VUE.js 2 in my project.

Here is my website's DOM structure:

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

Below is the script section of my code:

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

I am trying to obtain the height of userPanelMainContents and apply it dynamically to the aside element. How can I achieve this?

javascript jquery html css vue.js

Answer 1

Answer №1

To improve the code, consider returning a data property instead of using a method to retrieve the height value. Then, utilize the mounted function to set the height accordingly.

Here's an example:

<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;
    }
}

UPDATE: converted computed property to a data property and initialized it within the mounted event handler.

The syntax may vary due to restrictions on .vue files in CodePen, but here is the functional code snippet.

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

Answer 2

To improve the code, consider returning a data property instead of using a method to retrieve the height value. Then, utilize the mounted function to set the height accordingly.

Here's an example:

<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;
    }
}

UPDATE: converted computed property to a data property and initialized it within the mounted event handler.

The syntax may vary due to restrictions on .vue files in CodePen, but here is the functional code snippet.

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

in Vue.js, extract the style of an element and apply it to a different element

Answer №1

Similar questions

While continuing to input text, make sure to highlight a specific element from the search results list

Align the rotation of Object3D at the tab level

Adding HTML saved as a blob directly to the source of a .aspx page

Preventing blank text entries in a task management application

Firefox showing inconsistent jQuery positioning results

Utilizing and transmitting contextual information to the tooltip component in ngx-bootstrap

scroll after loading jQuery

The absence of image input was evident in the POST request

Switch up a JSON string using JavaScript

Conceal the div element if the value is either undefined or empty in AngularJS

Using AngularJS to send a post request with cherrypy

Using HTML div tags to create a looping expression that can interact with Javascript

obtain information from a Java servlet on a web page

A plug-in for TinyMCE that allows users to adjust column widths within a table

Having trouble loading a CSS file in CodeIgniter?

Issue with displaying jqplot in a jQuery page

Is it sufficient to only capture 4xx errors?

Retrieval of request in iframe URL

Display/Conceal WP Submenu

Utilizing Ajax in conjunction with the func_get_args() function