直近の記事一覧
検索エンジンの「AI」による回答結果 （24年12月29日）
Webのシステムを変えた方が良いかな。 （24年11月28日）
Apple Intelligence （24年10月29日）
1011 （24年10月11日）
診療（10月8日） （24年10月8日）
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よりも綺麗にコーディングできている感じがする。
投稿記事のカテゴリやタグと同じ記事をランダム表示します。