Вычисляемое свойство, реагирующее на window.innerwidth в VueJS

Question

По сути, мне нужно вычисленное свойство, которое возвращает true, если внутренняя ширина окна равна или меньше 768px, и false, если оно превышает 768px.

что я сделал:

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

но это свойство вычисляется только один раз, и если я изменю размер окна позже, оно не реагирует на это изменение, что я могу сделать?

Answer 1

Добавьте список событий в окно следующим образом:

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
    }
  }
})

Answer 2

Вычисленные свойства обновляются только при изменении их зависимостей, поэтому здесь Mobile не будет реагировать.