Je suis en train de mettre à niveau mon application 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 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 vient-il avec la nouvelle version?
--- EDIT --- Quelques codes supplémentaires:
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>
Composant principal:
<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>
C'est lié à Eslint. Mettre ceci:
"env": {
"browser": true,
"node": true
}
.eslintrc.js
dans ma racine a résolu le problème. ( la source )
L'emplacement le plus sûr pour utiliser les références de navigateur est le hook mounted()
lifecycle. Surtout si vous utilisez une configuration SSR telle que Nuxt.js ou similaire.
Essayez de mettre l'auditeur dans votre méthode created()
Vous allez également perdre le contexte de votre this
, utilisez donc une grosse flèche lexicale pour 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 ça devrait marcher (vue 2.x)
Correction des projets vue-cli 3.x en modifiant (créant) vue.config.js
:
module.exports = {
configureWebpack: config => {
config.output.globalObject = "this"
}
}