As someone who is new to JavaScript, I have a question regarding Vuex and creating a simple Todo Manager. I am facing an issue with deleting todos from my list and not getting the desired parameter (the id of the todo) in my actions.
Here is the code snippet:
todos.js
const actions = {
async deleteTodo({ commit , id}) {
await axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`);
console.log(id)
commit('removeTodo', id);
} };
const mutations = {
removeTodo (state, id) {
console.log(id)
state.todos = state.todos.filter(todo => todo.id !== id)
} };
Todos.vue
<template>
<div>
<h3>Todos</h3>
<div class="todos">
<div v-for="todo in allTodos" v-bind:key="todo.id" class="todo">
{{todo.title}}
<i @click="deleteTodo(todo.id)" class="fas fa-trash-alt"></i>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
name: "Todos",
methods: {
...mapActions('todos', (['fetchTodos', 'deleteTodo'])
)
},
computed: {
...mapGetters( 'todos',['allTodos'])
},
created() {
this.fetchTodos();
}
}
</script>
I have tried debugging using console.log(id) and found that the id returned is undefined. Even when hard coding the id
@click="deleteTodo("1")"undefined in the action.
If anyone can provide some guidance on where I may be going wrong, I would greatly appreciate it.