[to-do-app] 리팩토링: 할 일 완료 기능

 

 App.vue 

<template>
	<div id="app">
		<todo-header />
		<todo-input v-on:addTodoItem="addOneItem"></todo-input>
		<TodoList
			v-bind:propsdata="todoItems"
			v-on:removeItem="removeOneItem"
			v-on:toggleItem="toggleOneItem"
		></TodoList>
		<TodoFooter />
	</div>
</template>

toggleItem 이벤트가 발생하면 해당 컴포넌트의 toggleOneItem 함수가 수행됩니다.

 

// 할 일 완료
toggleOneItem(todoItem, index) {
    this.todoItems[index].completed = !this.todoItems[index].completed;
    localStorage.removeItem(todoItem.item);
    localStorage.setItem(todoItem.item, JSON.stringify(todoItem)); // 갱신
},

todoItems[index] 로 접근을 합니다. 해당 요소의 completed 를 반대로 변경해줍니다.

그리고나서 로컬 스토리지에서 키를 이용하여 삭제를 하고 다시 해당 키로 JSON 형태로 다시 저장합니다.

로컬 스토리지는 참고로 업데이트 기능이 없어 삭제하고 다시 삽입하는 형식으로 저장을 해야합니다.

 

 

 

 TodoList.vue 

// 리스트 요소 체크
toggleComplete(todoItem) {
    this.$emit("toggleItem", todoItem, index);
},

toggleItem 이벤트를 발생하고 다음 데이터들을 전달합니다.

 

 

 

 결과 화면

할 일 목록 체크 버튼을 클릭했을 시 토글이 되는 것을 확인할 수 있습니다.

 

 

 

 

vue todo

vue 할일 목록 체크

vue 체크

vue 토글

---