[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"
		></TodoList>
		<TodoFooter />
	</div>
</template>

removeItem 이벤트가 발생하면 removeOneItem 함수가 발생합니다.

 

// 할 일 삭제
removeOneItem(todoItem, index) {
    localStorage.removeItem(todoItem.item);
    this.todoItems.splice(index, 1);
},

 

로컬 스토리지에서 todoItem.item 키를 삭제합니다.

그리고나서 todoItems 안에 들어있는 요소를 삭제해야지 화면에 즉각적으로 반영이 됩니다.

 

 

 TodoList.vue 

// 리스트 요소 삭제
removeTodo(todoItem, index) {
    this.$emit("removeItem", todoItem, index);
},

 

removeItem 이벤트를 발생시키며 뒤의 데이터를 상위 컴포넌트로 전달합니다.

 

 

 

 결과 화면 

선택한 할 일 목록이 삭제되는 것을 확인할 수 있습니다.

 

 

 

 

vue todo

vue 할일 삭제

vue 요소 삭제

vue localstorage

---