반응형
Vue.js 2에는 '윈도'가 정의되어 있지 않습니다.
현재 애플리케이션을 Vue.js 1에서 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.filename:
// 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.syslog:
<!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>
브라우저 참조를 사용하는 가장 안전한 장소는mounted()라이프 사이클 훅특히 Nuxt.js와 같은 SSR 설정을 사용하는 경우.
에슬린트와 관련이 있어요설명:
"env": {
"browser": true,
"node": true
}
안에서..eslintrc.js내 뿌리로 문제를 해결했다.(소스)
청취자를 자신의 PC에 삽입해 보세요.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
완전히 테스트되지 않았지만 작동해야 합니다(v 2.x).
편집(생성)을 통해 vue-cli 3.x 프로젝트 수정vue.config.js:
module.exports = {
configureWebpack: config => {
config.output.globalObject = "this"
}
}언급URL : https://stackoverflow.com/questions/40707481/window-is-not-defined-in-vue-js-2
반응형
'programing' 카테고리의 다른 글
| vue.js 2에서 선택한 옵션을 설정하려면 어떻게 해야 합니까? (0) | 2022.08.27 |
|---|---|
| ARM C 호출 규칙에 저장할 레지스터는 무엇입니까? (0) | 2022.08.27 |
| C int 어레이를 0으로 리셋: 가장 빠른 방법? (0) | 2022.08.27 |
| vue js로 테이블 열 숨기기 (0) | 2022.08.27 |
| Vuetify CSS가 Vue 인스턴스 외부에 적용되는 이유는 무엇입니까? (0) | 2022.08.27 |