All geek questions in one place

"window" is not defined in Vue.js 2

I am currently updating my application from Vue.js 1 to Vue.js 2. I have a problem with the following function in my main component:

<script> export default { ready: function listenKeyUp() { window.addEventListener('keyup', this.handleKeyUp()); }, methods: { handleKeyUp(e) { if (e.keyCode === 27) { this.$router.go({ name: '/' }); } }, }, }; </script>

My console shows this error: 'window' is not defined How is this possible? I do not understand the reason. How to fix it and why does this problem arise with the new version?

--- EDIT --- Some additional code:

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>

The main component:

 <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>
+6
source share
3 answers

This is due to Eslint. Putting this:

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

inside .eslintrc.js problem is fixed in my root. ( source )

+3
source

Try adding a listener to your created() method

You will also lose context on your this , so use the lexical bold arrow to keep the context

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

Completely untested, but it should work (vue 2.x)

+3
source

The safest place to use browser links is mounted() hook. Especially if you are using an SSR setup like Nuxt.js or the like.

0
source

Source: https://habr.com/ru/post/1012508/

More articles:


All Articles