直近の記事一覧
$1499は高い (24年4月28日)
「サービス維持調整費」 (24年4月23日)
WordPressでHEICが表示されない (24年4月17日)
MacBook Air 13インチ(M3, 2024)の第一印象 (24年4月15日)
Amazon Kindle のポイント還元とゴルゴのセール (23年7月7日)
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よりも綺麗にコーディングできている感じがする。
投稿記事のカテゴリやタグと同じ記事をランダム表示します。