a minute ago

Vue.jsでウインドウサイズ変更を検知する


動かない例

そのままcomputedにしてもリアクティブになってないのでwindowサイズ変更を検知できない

@Component({})
export default class TableWraper extends Vue {
  get elmWidth () {
    return document.getElementById('target').offsetWidth
  }
}

良い例

resizeイベントリスナでdataの値を更新する

@Component({})
export default class TableWraper extends Vue {
  width = 0
  
  mounted () {
    this.init()
    this.width = document.getElementById('target').offsetWidth
    window.addEventListener('resize', () => {
        this.width = document.getElementById('target').offsetWidth
    })
  }
}

Related Articles