[Vue warn]: Error in v-on handler: ReferenceError is not defined

Painter.vue를 작성하는 도중 위와 같은 오류가 발생했다. 원인을 알고서는 나중에 허탈했다.

<template> <section> <h1>Drawing with mousemove event</h1> <canvas id="canvas" width="500" height="500" @mousedown="beginDrawing" @mouseup="stopDrawing" @mousemove="draw"> Canvas not supported </canvas> <br> <button id="btnPrev" class="button" @click="prev">캔버스 되돌리기</button> <button id="btnClea" class="button" @click="init">캔버스 초기화</button> <button id="btnSave" class="button" @click="upload">캔버스 저장하기</button> </section> </template> <script> export default { name: 'Painter', data () { return { isDrawing: false, x: 0, y: 0, canvas: null, }; }, methods: { draw(e) { if(this.isDrawing) { this.drawLine(this.x, this.y, e.offsetX, e.offsetY); this.x = e.offsetX; this.y = e.offsetY; } }, beginDrawing(e) { this.x = e.offsetX; this.y = e.offsetY; this.isDrawing = true; console.log(this.isDrawing); }, stopDrawing(e) { if (this.isDrawing) { this.drawLine(this.x, this.y, e.offsetX, e.offsetY); this.x = 0; this.y = 0; this.isDrawing = false; console.log(isDrawing); } }, }, mounted() { var c = document.getElementById("canvas"); this.canvas = c.getContext('2d'); }, } </script> <style scoped> #canvas { border:1px solid #000000; } </style> 

methods: 에서 stopDrawing(e) 함수가 문제였다. 아주아주 단순한 this. 키워드를 명시하지 않아서 발생한 문제였다.

 stopDrawing(e) { if (this.isDrawing) { this.drawLine(this.x, this.y, e.offsetX, e.offsetY); this.x = 0; this.y = 0; this.isDrawing = false; console.log(this.isDrawing); }

사소한 문제였는데 원인 찾느라고 고생했다. -.- 비슷한 문제로 [error `data` property in component must be a function]가 있으며, 컴포넌트에서의 Data 선언은 다르다. 각각의 다른 컴포넌트마다 각자의 데이터를 관리해야 하기 때문이다.

컴포넌트마다 Data를 오브젝트로 생성하여 여러 번 사용하더라도 결국엔 JS가 작동하는 방식으로 인해 구성 요소의 모든 단일 인스턴스가이 속성을 공유하여 Data 값을 참조하기 때문에 Data 침범이 일어날 수 있다.

이러한 이유 때문에 컴포넌트에서는 객체 리터럴로 선언하는 것이 아니라 함수형으로 return 값을 통해 리터럴을 반환한다. return을 이용하면 각 컴포넌트마다 데이터를 분리하여 관리할 수 있게 된다.

함수형 언어의 특성으로보인다 파이썬의 self. 와같은..
여하튼 분석하느라고 시간 좀 걸렸다. Arrow Function이라는 것도 추후에 알아봐야겠다.