인프런 커뮤니티 질문&답변

lectures/4/App_CompositionAPI.vue 파일에 아래와 같이 data 옵션을 추가하고

export default { data() { return { dataMessage: 'dataMessage' }; }, setup() { }, };

템플릿에

<p>{{ this.dataMessage }}</p>

<button v-on:click="this.dataMessage += '!'">Add Message</button>

를 추가하고 버튼을 누르면 정상적으로 뒤에 '!'가 출력된 dataMessage가 나옵니다

근데 이전 VUE2에서 공부할 때는

<button v-on:click="this.dataMessage += '!'">Add Message</button>

로 작성하면 Error in v-on handler: "TypeError: Cannot read properties of null (reading 'dataMessage')" 라는 에러가 떴었습니다.

그래서 그냥 this 없이 v-on:click="dataMessage += '!'" 로 작성하면 동작했는데 지금은 되고 vue2 사용할 때는 에러가 뜨던 이유가 뭔가요?