[Vue] this의 undefined 해결법

 

Vue 인스턴스에 정의된 data를 사용하기 위해서 this를 썼더니 undefined라고 에러가 났다.

어떻게 하면 대충 나오기도 하고 또 어떻게 하면 안나와서 이것에 대해 잘 정리해보려고한다.

 

함수 안에 다른 함수를 또 쓰면 그곳에서 사용하는 this는 가장 가까이 둘러싸인 함수의 내부를 가리키게 되어

바깥의 data를 사용할 수 없었던 것이었다.

//오류 코드
export default {
  data() {
    return {
      map: null,
    };
  },
  methods:{
  	useThisFirst(){
    	this.something.on('aa',function(second){  // 함수안의 함수라서 오류
        	this.map = true;
        })
    }
}

 

 

해결법

1. Arrow 함수 사용

- Arrow 함수의 this는 함수 내부가 아닌 함수가 존재하는 컨텍스트를 지칭함

export default {
  data() {
    return {
      map: null,
    };
  },
  methods:{
  	useThisFirst(){
    	this.something.on('aa',(second)=>{ 
        	this.map = true;
        })
    }
}

2. Bind 사용

- 내부 함수에 bind(this)를 붙여줘서 내부 함수 바깥의 먼저 선언했던 큰 스코프 함수를 지칭하게 해줌

export default {
  data() {
    return {
      map: null,
    };
  },
  methods:{
  	useThisFirst(){
    	this.something.on('aa',function(second){  
        	this.map = true;
        }.bind(this))
    }
}

 

 

 

 

 

참고 : 

https://chansnotes.github.io/2019/09/02/vue%EC%97%90%EC%84%9C-this-is-undefined-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/