「窗口」不Vue.js定義2

我正在升級我的應用程序從Vue.js 1至2 Vue.js我有以下功能的問題，我的主要成分：「窗口」不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控制檯仍然顯示：''窗口'未定義'。這怎麼可能？可能是什麼問題呢？ – Jordy

npm控制檯？這不是在瀏覽器中運行嗎？ –

不，在控制檯中鍵入'npm run dev'後。 – Jordy

「窗口」不Vue.js定義2

回答

相關問題