Vue.js 奮闘中(20年2月5日)

2020年2月5日

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の書き方一覧


投稿に関連する記事抜粋

投稿記事のカテゴリやタグと同じ記事をランダム表示します。

 カテゴリ一覧

 雑談(170)
アニメ(19)/ゲーム(12)/ドラマ(3)/パソコン(33)/小説(3)/広島東洋カープ(16)/映画(11)/漫画(33)/音楽(61)
 製作記(89)
AI(4)/CakePHP(3)/CentOS(4)/JavaScript(JS)(9)/Nuxt.js(4)/Vue.js(18)/WordPress(23)/料理(10)