vue.js의 methods속성에서 유의할 점

vue.js를 쓰다보면 이벤트 함수정의에서 methods 속성을 잘 쓰게 된다.

이때 주의할 점이 있다.

바로 methods 내부에서 es6 문법을 썼을때 생기는 문제다.

대부분 methods 안에서의 함수는 어떠한 데이터 속성을 조작하는 경우가 많다.

이때 this라는 객체를 사용해주어 데이터에 접근하게 된다.

하지만 여기에서 () => {} 같은 es6 함수 문법을 사용해 주면,

this 객체로 데이터에 접근을 하지 못하게 된다.

원인은 es6안의 this가 함수 내 객체로 변경되기 때문이다.

사소한 문제이지만 vue.js를 es6문법으로 작성한 사람에게는 원인을 알 수 없는 미스테리한 삽질 문제가 될 수 있다.

(혹 모르는 분들이 있으면 주의하길 바랍니다. ㅎㅎ)