"fenêtre" n'est pas défini dans Vue.js 2

Je suis actuellement à la mise à jour de mon application à partir de Vue.js 1 à Vue.js 2. J'ai un problème avec la fonction suivante dans mon composant principal:

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

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

Ma console m'affiche cette erreur: 'window' is not defined
Comment est-ce possible? Je ne comprends pas la raison. Comment résoudre ce problème et pourquoi ce problème est-il à venir avec la nouvelle version?

--- EDIT ---
Un code supplémentaire:

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>

Composante principale:

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

InformationsquelleAutor Jordy | 2016-11-20

7

L'endroit le plus sûr pour utiliser le navigateur référence est la mounted() cycle de vie du crochet. Surtout si vous utilisez un SSR d'installation comme Nuxt.js ou similaire.
- A l'aide de Nuxt, et il n'était pas au travail created(), mais il a travaillé dans mounted().
InformationsquelleAutor Hexodus
4

Essayer de mettre l'auditeur dans votre created() méthode

Vous allez également perdre du contexte sur votre this donc utiliser un lexicale de la graisse de la flèche afin de préserver le contexte
```
//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
```
Complètement non testé mais cela devrait fonctionner (vue 2.x)
- Je vous remercie. Essayé ton code, mais malheureusement, le mécanisme national de prévention de la console affiche toujours: 'window' is not defined. Comment est-ce possible? Quel pourrait être le problème?
- Le mécanisme national de prévention de la console? N'est-ce pas exécuté dans le navigateur?
- Non, après avoir tapé 'npm exécuter dev' dans la console.
- Veuillez ajouter l'ensemble de votre journal des erreurs pour votre OP
- A découvert qu'il était lié à eslint, voir ma réponse. Merci pour votre aide en tout cas!
InformationsquelleAutor darryn.ten
3

Que c'est lié à Eslint. En mettant ceci:
```
"env": {
    "browser": true,
    "node": true
}
```
à l'intérieur de .eslintrc.js dans ma racine fixe le problème. (source)

InformationsquelleAutor Jordy

Correctif de vue-cli 3.x projets d'édition (création) vue.config.js:

JS:

module.exports = {
    configureWebpack: config => {
        config.output.globalObject = "this"
    }
}

InformationsquelleAutor Ганна Саймонс

Vous devez vous connecter pour publier un commentaire.