[팀] 겸상 - 카카오 로그인 API 사용시 탈퇴 기능 실행 중 발생한 에러: Uncaught TypeError: this.$swal is not a function

 

[그림 1] 탈퇴 기능 실행시 첫 번째 스위얼럿창

 

카카오 로그인 API로 회원 가입한 사용자의 탈퇴 기능에 스윗얼럿을 적용했다. 탈퇴 기능 실행 시 두 번의 스윗얼럿 창이 뜨도록 코딩했다. 첫 번째 얼럿은 정말 탈퇴할 것인지 묻는 창이고, 두 번째 얼럿은 탈퇴가 잘 진행되었음을 알려주는 창이다. 그런데 두 번째 얼럿에서 [그림 2]와 같은 에러가 발생했다.

 

[그림 2] success 후 스윗얼럿 실행 에러

 

이 문제는 화살표 함수를 적용하여 해결하였고 [그림 3]과 같이 원하는 두 번째 스윗얼럿을 만나볼 수 있었다.

 

화살표 함수 적용 전 코드

...
success: function () {
    this.$swal({
        title: 'ㅠ_ㅠ',
        text: '꼭 다시 만나요~',
        icon: 'success',
        iconColor: '#ffcb00',
        confirmButtonText: '확인',
        confirmButtonColor: '#ffcb00',
    });
},
...

 

화살표 함수 적용 후 코드

...
success: () => {
    this.$swal({
        title: 'ㅠ_ㅠ',
        text: '꼭 다시 만나요~',
        icon: 'success',
        iconColor: '#ffcb00',
        confirmButtonText: '확인',
        confirmButtonColor: '#ffcb00',
    });
},
...

 

[그림 3] 화살표 함수를 이용한 후 정상적으로 표시되는 스윗얼럿

 

팀원의 도움으로 이 문제를 해결할 수 있었고 이후 참고한 내용은 다음과 같다!

https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9

[JavaScript] 화살표 함수와 this 바인딩