How to fix “this is undefined” in Vue.

Vue를 써보고 있는데, Vue 안에 method를 선언하고 this를 호출하니 undefined가 발생하였다.

export default {
  methods: {
    sayHello: () => {
    	this.val = 'hello';
    	console.log(this.val);
    }
  },
  data() {
	  return {
	  	val: ''
	  }
  }
}

#### 결과
this is undefined

원인을 찾아 보니 다음과 같은 내용을 확인했다.

If you try to access this from inside of an arrow function that’s on a Vue component, you’ll get an error because this doesn’t exist!

Vue 구성 요소에있는 화살표 함수 내부에서 this에 액세스하려고 하면 존재하지 않기 때문에 오류가 발생합니다!

Vue 구성 요소 안에서 this를 사용하려면 화살표 함수를 사용하지 말아야 한다는 내용이다. 다음과 같이 수정하면 잘 동작한다.

export default {
  methods: {
    sayHello() {
    	this.val = 'hello';
    	console.log(this.val);
    }
  },
  data() {
	  return {
	  	val: ''
	  }
  }
}

#### 결과
hello

화살표 함수는 익명 함수를 만들때 사용하며, 다음과 같은 이유로 사용됩니다.

  • 보다 짧고 응축된 구문
  • 향상된 가독성
  • this 주변상황에서 취해진다.

Vue의 method 내부에서 사용하는 것은 크게 문제가 없지만, method 자체를 화살표 함수로 선언할 경우 this를 사용할 수 없다.

# Vue 내부에서 화살표 함수 사용 예
data() {
  return {
    match: 'This is a message',
  };
},
computed: {
  filteredMessages(messages) {
    console.log(this); // Our Vue component
    
    const filteredMessages = messages.filter(
      // References our Vue Component
      (message) => message.includes(this.match)
    );
    
    return filteredMessages;
  }
}

참고 자료


Posted by lahuman