v2 - suppression et sauvegarde

src/App.vue

@@ -17,6 +17,7 @@
         <label>
           <input type="checkbox" v-model="todo.completed">
           {{ todo.title }}
+          <button class="delete" @click="deleteTodo(todo.id)">Supprimer</button>
 
         </label>
       </li>
@@ -35,7 +36,8 @@
 
 <script setup>
 
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+
 
 
 const hideCompleted = ref(false)
@@ -46,9 +48,11 @@ const addTodo = () => {
   todos.value.push({
     title: newTodo.value,
     completed: false,
-    date: Date.now()  
+    date: Date.now(),
+    id: Date.now() + Math.random()  
   });
 
+  saveTodosToLocalStorage(); 
   newTodo.value = '';
 };
 
@@ -60,5 +64,27 @@ const sortedTodos = () => {
   return sortedTodo
 };
 
+const deleteTodo = (id) => {
+  const index = todos.value.findIndex(todo => todo.id === id); 
+  if (index !== -1) {
+    todos.value.splice(index, 1);  
+    saveTodosToLocalStorage();
+  }
+};
+
+const saveTodosToLocalStorage = () => {
+  localStorage.setItem('todos', JSON.stringify(todos.value));
+};
+
+onMounted(() => {
+  const savedTodos = localStorage.getItem('todos');
+  if (savedTodos) {
+    todos.value = JSON.parse(savedTodos);
+  }
+});
+
+
+
+
 </script>
 

src/assets/main.css

@@ -1,4 +1,14 @@
 .completed {
   opacity: .5;
   text-decoration: line-through;
-}
+}
+
+.delete {
+  padding: 5px 10px;  
+  font-size: 12px;    
+  height: 30px;       
+  width: auto;        
+  color: red;
+  background-color: transparent;
+  border: none;
+}