코드공부방

Vue.js To Do List 만들기 #4 컴포넌트 구현(3), 문제해결 컴포넌트 생성 및 등록(3) 컴포넌트 구현 > TodoFooter 이제 마지막 TodoFooter 컴포넌트 구현만 남겨두고있다. TodoFooter컴포넌트에서는 전체 목록을 삭제하는 버튼을 넣고 버튼을 클릭하면 clearTodo메소드를 실행한다. 전체삭제 /* /src/components/TodoFooter.vue > */ export default { methods: { clearTodo(){ localStorage.clear(); } } } 전체삭제 버튼을 누르면 localStorage의 모든 목록이 삭제된다. 화면의 할 일 목록은 새로고침을 해야만 삭제가 된다. TodoInput컴포넌트 에서 할 일을 추가했을때와 TodoFo..

Vue.js To Do List 만들기 #3 컴포넌트 구현(2) 컴포넌트 생성 및 등록(2) 컴포넌트 구현 > TodoList TodoList컴포넌트는 localStorage에 저장되어있는 item 목록을 화면에 보여주는 역할을 한다. 순서가 없는 목록은 ul, li 요소를 사용한다. 먼저 localStorage에 저장되어있는 목록을 vue 데이터 todoItems에 저장한다. /* /src/components/TodoList.vue > */ export default { data(){ return { todoItems: [] } }, created(){ if(localStorage.length > 0){ for(var i = 0; i < localStorage.length; i++){ this.todo..