delete TODO by click on trash icon

src/App.vue

@@ -8,7 +8,7 @@
  </div>
  <div class="col-12 col-md-6">
  <div class="d-flex flex-column h-100 justify-content-center">
- <todo-item v-for="todo in todos" :key="todo.id" :title="todo.title" :caption="todo.caption"></todo-item>
+ <todo-item v-for="todo in todos" :key="todo.id" :id="todo.id" :title="todo.title" :caption="todo.caption"></todo-item>
  </div>
  </div>
  </div>

src/components/TodoBox.vue

@@ -3,30 +3,39 @@
  <div class="TodoBox d-flex align-items-center">
  <div class="d-flex flex-column justify-content-center align-items-center">
  <h1 class="text-white mb-3">TODO app by Mahdi Kheibari</h1>
- <input
- type="text"
- class="form-control"
- placeholder="Enter title of TODO"
- v-model="title"
- />
- <textarea
- cols="30"
- rows="10"
- class="form-control my-4"
- placeholder="Enter discription of your TODO"
- v-model="caption"
- >
- </textarea>
- <button @click="setTodo" 
- class="btn btn-success text-white align-self-start">
- submit
- </button>
+ <form action="" class="w-100">
+ <input
+ type="text"
+ class="form-control"
+ placeholder="Enter title of TODO"
+ v-model="title"
+ />
+ <textarea
+ cols="30"
+ rows="10"
+ class="form-control my-4"
+ placeholder="Enter discription of your TODO"
+ v-model="caption"
+ >
+ </textarea>
+ <input
+ type="submit"
+ value="Creat new TODO"
+ @click.prevent="
+ setTodos({
+ title:title,
+ caption:caption,
+ id:$uuid.v4()
+ })"
+ class="btn btn-success text-white align-self-start"
+ />
+ </form>
  </div>
  </div>
  </div>
 </template>
 <script>
-// import { mapActions } from "vuex";
+import { mapActions } from "vuex";
 export default {
  data() {
  return {};
@@ -37,7 +46,6 @@ export default {
  return this.$store.getters.getTodoTitle;
  },
  set(value) {
- // return mapActions(["changeTodoTitle"]);
  this.$store.commit("changeTodoTitle", value);
  }
  },
@@ -48,14 +56,11 @@ export default {
  set(value) {
  this.$store.commit("changeTodoCaption", value);
  }
- },
- },
- methods: {
- setTodo(){
- this.$store.commit("setTodos", {title:this.title,caption:this.caption,id:this.$uuid.v4()});
- console.log(this.$store.state.todos);
  }
  },
+ methods: {
+ ...mapActions(["setTodos"]),
+ }
 };
 </script>
 <style scoped>

src/components/TodoItem.vue

@@ -5,7 +5,9 @@
  <div class="row no-gutters w-100 align-items-center">
  <h3 class="card-title col-9"> {{title}}</h3>
  <div class="col-2 offset-1">
- <b-icon icon="trash" font-scale="2" class="text-danger items-icon"></b-icon>
+ <b-icon icon="trash" 
+ @click="deleteTodo(id)"
+ font-scale="2" class="text-danger items-icon"></b-icon>
  </div>
  </div>
  </div>
@@ -18,10 +20,15 @@
  </div>
 </template>
 <script>
+import { mapMutations } from 'vuex';
 export default {
  props:{
  title:String,
- caption:String
+ caption:String,
+ id:String
+ },
+ methods:{
+ ...mapMutations(["deleteTodo"])
  }
 }
 </script>

src/store/Action.js

@@ -5,5 +5,10 @@ export const changeTodoCaption = (context, newTitle) => {
  context.commit("changeTodoCaption", newTitle);
 };
 export const setTodos = (context, Todo) => {
- context.commit("setTodos", Todo);
+ if (Todo.title!=="") {
+ context.commit("setTodos", Todo);
+ }
+ else{
+ alert("please enter a title for TODO");
+ }
 };

src/store/Mutation.js

@@ -6,4 +6,9 @@ export const changeTodoCaption = (state, newTitle) => {
 };
 export const setTodos = (state, newTodo) => {
  state.todos = [...state.todos,newTodo];
+ state.todoTitle="";
+ state.todoCaption="";
+};
+export const deleteTodo = (state, id) => {
+ state.todos=state.todos.filter((item)=>item.id!==id);
 };