AI要約
Vue.jsを用いて動的に要素の高さを調整しようとしていますが、うまく動作しない問題に直面しています。TypeScriptを導入し、Windowサイズの変更検知と高さ調整を試みています。参考にした記事も共有し、コード例を掲載しています。
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）
ついでに、TypeScriptにも手を出している。
JavaScriptよりも綺麗にコーディングできている感じがする。