Vuejs：根据窗口中的剩余空间自动调整div

Question

在vueJs（2.5.16）中我试图设置div的样式属性，以便根据窗口的大小自动调整窗口的剩余空间：

我打算使用一个计算值，它可以让我获得正确的高度并将其绑定到所需div的style属性中：

Vue.component('menus', {
    template: '<div id="menu-div">MY MENU</div>'
});

Vue.component('expandable', {
    template: '<div id="expandable-div" :style="{height:expandableHeight}">EXPANDABLE<div>{{expandableHeight}}</div></div>',
    computed: {
        expandableHeight() {

            return ($(window).height() - $("#expandable-div").position().top) + 'px'

        }
    }
});

var vm = new Vue({
    el: '#app'
});

fiddle

使用jQuery中的$(window).height()和$("#expandable-div").position().top我认为我可以实现结果，因为它可以在我的控制台中运行。

不幸的是我有一个错误：

  

TypeError：无法读取未定义

的属性“top”

Answer 1

为什么不使用CSS的flexbox来实现呢？

Vue.component('menus', {
  template: '<div id="menu-div">MY MENU</div>'
});

Vue.component('expandable', {
  template: '<div id="expandable-div">EXPANDABLE<div>foo</div></div>',
  computed: {}
});

var vm = new Vue({
  el: '#app'
});

body {
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#menu-div {
  height: 50px;
  background: #768ffb;
  margin-bottom: 5px;
}

#expandable-div {
  background: #76fbc1;
  flex-grow: 1;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <menus></menus>

  <expandable></expandable>
</div>