Vue.js にて動的に要素の高さを調整したいのだが、うまく動かない。

<div id="AddTrackFrame" v-bind:style="[addTrackFrameStyle]">

(略)

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component
export default class HNAddTrackViewController extends Vue {

  addTrackFrameHeight: number;

  addTrackFrameStyle = {
    height: this.addTrackFrameHeight + "px",
  }

  // FrameSize を Windowサイズに当てはめる
  public handleResize() {
    this.addTrackFrameHeight = window.innerHeight
    //console.log(this.addTrackFrameHeight)
  }

  created(){
    // Windowサイズを取得してFrameに当てはめ
    this.handleResize()

  }

  mounted(){
    // イベントリスナを紐付け
    window.addEventListener('resize', this.handleResize)

  }

  destroyed(){
    // AddTrackFrameが破棄されることはないが念のため
    window.removeEventListener('resize', this.handleResize)

  }

}
</script>

参考にしているのは次の記事。

Vue.js CSSを操作して、スタイルを動的に設定する(v-bind:style)

VueコンポーネントでWindowサイズ変更検知&値取得

ついでに、TypeScriptにも手を出している。
JavaScriptよりも綺麗にコーディングできている感じがする。

Vue.js to TypeScriptの書き方一覧

 一覧ページへもどる