diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue index 1a6d274..4b8fa45 100644 --- a/src/components/TodoItem.vue +++ b/src/components/TodoItem.vue @@ -56,7 +56,7 @@ height="40px" width="40px" color="error" - @click="deleteHandler(todoData.id)" + @click="deleteHandler(todoData)" > mdi-delete-outline @@ -73,10 +73,6 @@ export default { todoData: { type: Object, default: () => {} - }, - todoListIndex: { - type: Number, - default: null } }, data() { @@ -84,9 +80,9 @@ export default { }, methods: { ...mapActions(['deleteTodo', 'updateTodo']), - deleteHandler(id) { + async deleteHandler(todoData) { this.todoData.show = false - this.deleteTodo(this.todoListIndex) + await this.deleteTodo(todoData.id) }, updateTodoHandler(todo) { this.updateTodo(todo) @@ -108,7 +104,7 @@ export default { transition: all 0.3s ease; } .slide-fade-leave-active { - transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); + transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter, .slide-fade-leave-to { diff --git a/src/store/index.js b/src/store/index.js index 4ff0c09..1000eaf 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -25,7 +25,8 @@ export default new Vuex.Store({ state.todos.push(payload) }, deleteTodo(state, id) { - state.todo.splice(id, 1) + const todoIndex = state.todos.findIndex(todo => todo.id === id) + state.todos.splice(todoIndex, 1) }, updateRequestBuffer(state, payload) { state.requestBuffer = payload @@ -36,7 +37,7 @@ export default new Vuex.Store({ axios .get('https://jsonplaceholder.typicode.com/todos') .then(res => { - const splicedTodos = res.data.splice(0, 3) + const splicedTodos = res.data.splice(0, 10) for (const todo of splicedTodos) { todo.show = true todo.editMode = false