Nuxt "Cannot read property toLowerCase of undefined" 오류
0. 상황
- Nuxt 1.4.0
- Vue 2.5.16
window.addEventListener('message', someFunc);를 추가하니 "Cannot read property toLowerCase of undefined" 오류가 발생했다.
1) someFunc : 단순히 이벤트를 받아서 넘어온 인자를 확인하고 현재 컴포넌트의 data에 설정하는 함수. 대충 표현하자면 이런 코드이다.
somFunc: function (event) {
if (event.data && event.data.type === 'TYPE') {
this.someVal = event.data.value;
}
}
2) 넘어오는 값
parent window에서 오류가 발생한 페이지를 iframe으로 불러오고 onload되면 아래처럼 보낸다.
(iframe).contentWindow.postMessage({type: 'TYPE', value: 'VALUE'}, '*');
1. 해결
addEventListenr함수의 3번째 인자로 false를 추가했다.
window.addEventListener('message', someFunc, false);
3번째 인자는 listener에 대한 옵션으로 boolean값으로 주면 들어온 이벤트를 전파하는 방법(이벤트 순서)을 설정할 수 있다.
true면 capturing을 사용, false면 하지 않겠다는 뜻이다.
(bubbling하겠다는 건지는 정확히 모르겠다)
addEventListner와 이벤트 순서에 대한 상세는 아래 페이지들 참조.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://www.quirksmode.org/js/events_order.html#link4
https://developers.google.com/web/updates/2016/10/addeventlistener-once
https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases
첫 번째 페이지를 보면 3번째 인자는 기본값이 false라고 하는데 왜 다시 써줘야 하는지는 잘 모르겠다.
- Nuxt 1.4.0
- Vue 2.5.16
window.addEventListener('message', someFunc);를 추가하니 "Cannot read property toLowerCase of undefined" 오류가 발생했다.
1) someFunc : 단순히 이벤트를 받아서 넘어온 인자를 확인하고 현재 컴포넌트의 data에 설정하는 함수. 대충 표현하자면 이런 코드이다.
somFunc: function (event) {
if (event.data && event.data.type === 'TYPE') {
this.someVal = event.data.value;
}
}
2) 넘어오는 값
parent window에서 오류가 발생한 페이지를 iframe으로 불러오고 onload되면 아래처럼 보낸다.
(iframe).contentWindow.postMessage({type: 'TYPE', value: 'VALUE'}, '*');
1. 해결
addEventListenr함수의 3번째 인자로 false를 추가했다.
window.addEventListener('message', someFunc, false);
3번째 인자는 listener에 대한 옵션으로 boolean값으로 주면 들어온 이벤트를 전파하는 방법(이벤트 순서)을 설정할 수 있다.
true면 capturing을 사용, false면 하지 않겠다는 뜻이다.
(bubbling하겠다는 건지는 정확히 모르겠다)
addEventListner와 이벤트 순서에 대한 상세는 아래 페이지들 참조.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://www.quirksmode.org/js/events_order.html#link4
https://developers.google.com/web/updates/2016/10/addeventlistener-once
https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases
첫 번째 페이지를 보면 3번째 인자는 기본값이 false라고 하는데 왜 다시 써줘야 하는지는 잘 모르겠다.