[delete] - filter 함수 적용 시 화면 반영 안됨

[chaeyeonan]

문제

[ 반응성 문제 ] 할일을 삭제하는 기능 구현 시 filter 함수를 사용하면 todolist 배열에서는 삭제가 되나, 화면에 반영 안됨

TodoApp.vue

deleteTodo(id) {
      this.todolist = this.todolist.filter((item) => item.id !== id);
 }

[chaeyeonan]

원인

• TodoApp.vue 에서 TodoItemList.vue로 todolist를 props로 넘겨주고 있음
• TodoItemList.vue에서 props로 받은 후 data에 한번 더 바인딩 하고 있었음

TodoApp.vue

<todo-item-list
    :todoItems="todolistOfToday"
    :date="createdDate"
    @delete="deleteTodo"
    @update="updateTodo"
/>

TodoItemList.vue

props: {
    date: {
      type: String,
      required: true,
    },
    todoItems: {
      type: Array,
      required: true,
    },
},
data() {
    return {
      todolist: this.todoItems,
    };
}

• data()는 처음 mount 될 때 실행됨 > TodoApp.vue에서 todolist가 바뀌어도 TodoItemList.vue의 data가 바뀌지 않음
• 즉, 새로고침 하거나 mount가 새로 될때 data가 갱신됨

해결방법 (1)

• TodoItemList.vue의 data를 삭제하고, props로 받은 todoItems를 그대로 사용

기존 TodoItemList.vue

<todo-item
      v-for="todos in todolist" 
      :key="todos.id"
      :todo="todos"
      @delete="deleteData"
      @update="updateData"
/>

수정 TodoItemList.vue

<todo-item
      v-for="todos in todoItems"  //props 받은거 그대로 사용
      :key="todos.id"
      :todo="todos"
      @delete="deleteData"
      @update="updateData"
/>

[chaeyeonan]

해결방법 (2)

• 삭제를 클릭한 해당 task id를 이용하여 index를 찾아, 해당 index를 배열에서 삭제하기

  deleteTodo(id) {
    const index = this.todolist.findIndex((item) => item.id === id); // index 찾기
    if (index !== -1) {
         this.todolist.splice(index, 1); // 해당 index를 삭제
    }
  }