도리 도리

todo 삭제 및 편집 todoItem 템플릿 {{todo.message}} 편집 X 템플릿은 간단하다. 체크박스가 있고, 메시지가 보인다. 뒤에는 편집과 삭제 버튼이 있다. 이 버튼들을 누를 때 기능들을 추가해볼 것이다. @click.stop 편집/삭제 버튼을 만들면서 v-on:click.stop을 사용했다. .stop을 붙이면 이벤트의 propagation이 중지된다. 즉, 편집버튼을 클릭한다고 해보자. 따로 캡쳐링 단계에서 이벤트를 리스닝하는 리스너는 없으므로, 버블링 단계에서 가장 먼저 이벤트 핸들러 onClickEdit이 호출된다. .stop이 없다면 그 후 버블링이 진행되어 상위 컴포넌트인 li에서 onClickItem이 호출된다. 하지만 .stop을 통해 이벤트 propagation을 중지 ..