获取元素样式并将其分配给 vue.js 中的另一个元素

Question

我正在使用 VUE.js 2

这是我的 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>

这是我的脚本：

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

我想获取 userPanelMainContents 高度并将其分配给 aside 标签。 我怎样才能做到这一点？！！！

Answer 1

尝试返回一个数据属性而不是使用方法返回高度，然后您可以使用挂载函数设置高度。

像这样：

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

编辑：将计算更改为数据属性，并在调用挂载事件时设置它。

它将使用不同的语法，因为我不能在 codepen 上使用 .vue 文件，但这里是工作代码。

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