Невозможно запустить addEventListener (изменить размер) в VueJS CLI, чтобы получить ширину экрана

Question

Я хочу сгенерировать два кода html для двух разных размеров экрана в VueJS. Я пытался использовать addEventListener, чтобы постоянно получать ширину экрана, и я застрял. Может ли кто-нибудь помочь?

Вот мой код:

export default{

    data() {
        return {
            currentWidth: 0,
            desktopView: true
        }
    },        

    methods:{
         detectScreenWidth(event){
             this.currentWidth = window.innerWidth;
             console.log("currentWidth: "+this.currentWidth);
         }
    },

    created() {
        document.addEventListener('resize', this.detectScreenWidth );
    },

    beforeDestroy() {
        document.removeEventListener('resize', this.detectScreenWidth);
    }

}

Answer 1

Согласно документам https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event:

Однако события изменения размера запускаются только для объекта окна

, что означает, что вы должны вызовите

window.addEventListener('resize', this.detectScreenWidth );

вместо document.

Кроме того, как упомянул Николай Янков, вы должны вызвать addEventListener в методе mounted(). Полученный код:

mounted(){
    window.addEventListener('resize', this.detectScreenWidth );
}

Answer 2

Вы не можете использовать window.document в ловушке жизненного цикла created(), потому что экземпляр Vue еще не смонтирован в DOM. Это можно сделать в mounted().