计算属性在VueJS中对window.innerwidth有反应

Question

基本上,我需要的是一个计算属性,当窗口内部宽度等于或低于768px时返回true,当它高于768px时返回false.

我做了什么:

computed: {
  isMobile() {
    if (window.innerWidth <= 768) {
      return true
    } return false
  }
}

但是只计算一次该属性,如果我稍后调整窗口大小,它不会对该更改做出反应,我该怎么办？

Answer 1

像这样在窗口中添加一个eventlistener:

new Vue({
  el: "#app",
  data() { return { windowWidth: window.innerWidth } },
  mounted() {
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth
      console.log(this.isMobile)
    })
  },
  computed: {
    isMobile() {
      return this.windowWidth <= 768
    }
  }
})