«окно» не определенно в Vue.js 2

Я модернизирую мое заявление от Vue.js 1 до Vue.js 2. У меня есть проблемы с помощью следующей функции в моем основном компоненте:«окно» не определенно в Vue.js 2

<script> 
    export default { 
    ready: function listenKeyUp() { 
     window.addEventListener('keyup', this.handleKeyUp()); 
    }, 

    methods: { 
     handleKeyUp(e) { 
     if (e.keyCode === 27) { 
      this.$router.go({ name: '/' }); 
     } 
     }, 
    }, 
    }; 
</script>

Моя консоль показывает эту ошибку: 'window' is not defined Как это возможно? Я не понимаю причину. Как это исправить и почему возникает эта проблема с новой версией?

--- EDIT --- Некоторый дополнительный код:

main.js:

// Import plugins 
import Vue from 'vue'; 
import VueResource from 'vue-resource'; 
import VueI18n from 'vue-i18n'; 

// Import mixins 
import api from './mixins/api'; 

// Import router config 
import router from './router'; 


// Register plugins 
Vue.use(VueResource); 
Vue.use(VueI18n); 
Vue.mixin(api); 


// Go 
new Vue({ 
    router, 
}).$mount('#app');

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>New website</title> 

     <link rel="shortcut icon" href="/static/favicon.ico" /> 
     <link rel="apple-touch-icon" href="/static/mobile.png"> 

     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    </head> 
    <body> 
     <div id="app"> 
      <router-view></router-view> 
     </div> 

     <noscript> 
      <div class="container"> 
       <div class="col-sm-6 col-sm-offset-3"> 
        <div class="alert alert-danger"> 
         JavaScript is disabled in your web browser! 
        </div> 
       </div> 
      </div> 
     </noscript> 

    </body> 
</html>

Основной компонент:

<template> 
    <div> 

     <div class="container"> 
      <header> 
       HEADER HERE 
      </header> 
     </div> 


     <div id="modal" v-if=" $route.name !== 'home' " transition="modal"> 
      <div id="modal-bg" :to="{ name: 'home' }"></div> 
      <div id="modal-container"> 
       <div id="modal-header"> 
        <h2>Modal</h2> 
        <router-link id="modal-close" :to="{ name: 'home' }">X</router-link> 
       </div> 
       <router-view></router-view> 
      </div> 
     </div> 


     <nav id="primary-navigation"> 
      <div class="container-fluid"> 
       <div class="row"> 
        NAV HERE 
       </div> 
      </div> 
     </nav> 

    </div> 
</template> 


<script> 
    /* SCRIPT PART, SEE TOP OF THIS POST */ 
</script> 


<style lang="scss"> 
    /* CSS */ 
</style>

источник

2016-11-20 Jordy

Это связано с Eslint. Сведя:

"env": { 
    "browser": true, 
    "node": true 
}

внутри .eslintrc.js в моем корне исправили проблему. (source)

источник

2016-11-21 20:10:00 Jordy

Попробуй поставить слушатель в методе created()

Вы также будете терять контекст на вашем this так использовать лексический жир стрелок, чтобы сохранить контексте

// rest of export 
created() { 
    // make an event listener and pass the right `this` through 
    window.addEventListener('keyup', (event) => { 
    // if the key is escape 
    if (event.keyCode === 27) { 
     // due to `=>` this is the this you're expecting 
     this.keyHandler() 
    } 
    } 
}, 
methods: { 
    keyHandler() { 
    // this *should* be the right this 
    this.$router.go({ name: '/' }) 
    } 
} 
// rest of export

Полностью тестировались, но он должен работать (vue 2.x)

источник

2016-11-21 11:09:05

Спасибо. Пробовал ваш код, но, к сожалению, консоль NPM все еще отображает: '' window 'не определен'. Как это возможно? В чем может быть проблема? – Jordy

Консоль npm? Разве это не работает в браузере? –

Нет, после ввода «npm run dev» в консоли. – Jordy

ответ

Смежные вопросы