Как сделать отслеживание ширины экрана автоматически на vue?

Question

[Vadimjkeee]

В моем случае все работает, НО только тогда, когда сам меняю ширину экрана, наверное, потому что это метод. Как переписать это правильно, чтобы все работало без изменения ширины экрана вручную?

В коде суть в том, что тру меняется на фолс при определенной ширине экрана.

data() {
    return {
      window: {
        width: 0,
        height: 0
      },
      arrowDropdown: false,
      activeAcc: null
    };
  },
  mounted() {
    window.addEventListener('resize', this.checkChapter)
    document.body.addEventListener('click', this.smoothScroll)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.checkChapter)
    document.body.removeEventListener('click', this.smoothScroll)
  },
  methods: {
    checkChapter(idFromEvent) {
      if (window.innerWidth < 1228) {
        this.activeAcc = this.list.find(acc => acc.id == idFromEvent);
        let hideChapter = this.list[this.list.length - 1];
        hideChapter.arrowDropdown = false;
        let lastChapter = this.list[this.list.length - 2];
        lastChapter.arrowDropdown = true;
      }
      if .....
    },
  },
};

Comments

[Антон Антон]

mounted() {
window.addEventListener('resize', this.checkChapter)
document.body.addEventListener('click', this.smoothScroll)
this.checkChapter()
this.smoothScroll()
},

Answer 1

[Tema Smirnov]

Подключите библиотеку @vueuse/core и используйте из неё готовый реактивный хук (1.16 kB весит) useWindowSize, пример:

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
const { width, height } = useWindowSize()

function checkChapter(idFromEvent) {
  if (width < 1228) {
    // ...
  }
}
</script>

<template>
  <p>{{ width }} x {{ height }}</p>
</template>