Uncaught TypeError: Cannot read properties of undefined (reading 'push') at HTMLDivElement.eval

네이버 지도 api를 사용하고 있고 라우터를 변경하는 코드에서 아래와 같은 에러가 발생했다.

Uncaught TypeError: Cannot read properties of undefined (reading 'push') at HTMLDivElement.eval

📂원인)
this.$route.push()를 사용하려고 했을 때 오류가 발생했다. 해당 코드가 Vue 컴포넌트 내부의 메소드가 아니기 때문이다.

DOM 이벤트 리스너 안에서 this는 해당 리스너를 실행한 DOM 요소를 가리키기 때문에 Vue 인스턴스에 접근할 수 없다.

sol)

//방법1: 화살표함수 사용해서 this.$떼버려
window.naver.maps.Event.addDOMListener(
    cstmCtrl2.getElement(),
    "click",
    () => {
        router.push({ name: "myFavSet" }).catch(error => {});
    }
);

//방법2: .bind(this)추가
window.naver.maps.Event.addDOMListener(
    cstmCtrl2.getElement(),
    "click",
    function() {
        this.$router.push({ name: "myFavSet" }).catch(error => {});
    }.bind(this)
);

👉 나는 2번째 방법을 사용해서 에러를 해결했다.