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라고 하는데 왜 다시 써줘야 하는지는 잘 모르겠다.

이 블로그의 인기 게시물

Postgresql에서 5432 port가 열려있냐는 문제(Ubuntu 기준)

vue에서 v-html에 포함된 class의 css가 적용되지 않는 경우

Linux screen 명령어 정리