반응형
vuejs 입문 수정
-
[Do it! Vue.js 입문] Todo List 수정기능추가 ver2VueJs공부 2024. 2. 2. 23:42
오랜만에 뷰를 다시 공부할 겸 TodoList를 만들면서, 이전에 만들었던 수정기능보다 간단한 방법이 생각나서 기록으로 남긴다. - 모든 데이터의 처리는 App.vue에서 담당하며 하위 컴포넌트들은 데이터 처리를 App.vue로 $emit() 으로 요청한다. - todoItems에 데이터를 담을 때, Date().getTime()을 id로 관리하여 처리하도록 하였다. - 등록시간으로 sort하여 등록순으로 리스트가 출력되도록 처리하였다. - 샘플 소스는 페이지 하단에 기재함. [App.vue] 수정method - TodoList.vue에서 modifyItem 이벤트를 받으면 modifyItem 을 수행하여 변경사항을 저장한다. - localStorage에 기존과 같은 key로 setItem할 경우 기존 ..