„okno” nie zostało zdefiniowane w Vue.js 2

Jestem obecnie modernizacji mój wniosek z Vue.js 1 do Vue.js 2. Mam problem z następujących funkcji w moim głównym składnikiem:„okno” nie zostało zdefiniowane w 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>

Moja konsola pokazuje ten błąd: 'window' is not defined Jak to jest możliwe? Nie rozumiem powodu. Jak to naprawić i dlaczego pojawia się problem z nową wersją?

--- EDIT --- Niektóre dodatkowy kod:

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>

Główny składnik:

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

Źródło

2016-11-20 Jordy

Jest to związane z Eslint. Umieszczenie tego:

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

wewnątrz .eslintrc.js w katalogu głównym naprawiono problem. (source)

Źródło

2016-11-21 20:10:00 Jordy

Spróbuj wprowadzenie słuchacza w sposób created()

Ty też będzie utraty kontekstu na swojej this więc używać leksykalny tłuszczu strzałkę, aby zachować kontekście

// 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

ale całkowicie niesprawdzone powinno działać (vue 2.x)

Źródło

2016-11-21 11:09:05

Dziękuję. Próbowałem twojego kodu, ale niestety konsola NPM nadal wyświetla: '' okno 'nie jest zdefiniowane'. Jak to możliwe? Jaki może być problem? – Jordy

Konsola npm? Czy to nie działa w przeglądarce? –

Nie, po wpisaniu "npm run dev" w konsoli. – Jordy

„okno” nie zostało zdefiniowane w Vue.js 2

Odpowiedz

Powiązane problemy