Doit Vue.js입문 todolist 수정기능 추가하기

교재를 보면서 todoList를 만들어 보았다.

그런데, 교재에서는 수정기능을 따로 기재하지 않고, 각자 알아서 고민해보고 만들어 볼 기회를 주었다..

하여, 직접 수정기능을 추가해보았다.

 

개선한 버전을 추가하였습니다.

https://mhui123.tistory.com/65

 

연필 모양을 클릭했을 때 input 창으로 변경된 모습

새로 데이터를 입력하고 엔터키를 누르면 수정이 완료됐음을 확인할 수 있다.

app.vue

수정한 <TodoList>

수정을 위해 추가한 데이터들 기본값

수정작업을 담당하는 method

LocalStorage와 javaScript의 array는 수정기능을 따로 제공하지 않으므로 직접 조작해주었다.

수정이 발생하는 부분이 List 마지막 부분인 경우는 그냥 그 부분만 제거하고 넣어주면 되지만,

그외 부분은 수정한 데이터를 그 자리에 넣어주어야 해서 index를 기준으로 작업을 구분해주었다.

 

TodoList.vue

새로 추가한 체크박스와 수정버튼

props와 data

체크박스 변경과 내용수정 method

chechkedItem(index)는 목록에서 체크부분을 클릭했을 때, app.vue의 showCheck의 true/false를 변경하고, 선택된 index를 app.vue로 넘겨준다.

 

changeItem()은 input에 입력한 데이터를 app.vue의 fixContent(todoItem)으로 넘겨주는 역할을 한다.

 

https://github.com/mhui123/todolist-prac

GitHub - mhui123/todolist-prac