q11

src/components/TODOComponent.vue

@@ -1,11 +1,30 @@
 <script setup lang="ts">
     import Todo from '../todo';
-    import { defineProps } from 'vue';
+    import { ref,defineProps, nextTick } from 'vue';
 
     const props = defineProps<{ todo: Todo}>()
 
     const emit = defineEmits(['deleteTodo'])
 
+    //Q11
+    const editing = ref(false);
+    const edited = ref(props.todo.titre);
+    const editInput = ref<HTMLInputElement>();
+
+    function startEditing(){
+        editing.value = true;
+        nextTick(()=>{
+            editInput.value?.focus();
+        })
+    }
+
+    function saveEdit() {
+        if (edited.value.trim()) {
+            props.todo.titre = edited.value.trim();
+        }
+        editing.value = false;
+    }
+
     function deleteTodo(){
         // Send to deleteTodo with props.todo parameters
         emit('deleteTodo',props.todo);
@@ -14,7 +33,16 @@
 
 <template>
     <div class="todo-each">
-        <h3>{{ todo.titre }}</h3>
+        <div v-if="!editing" @dblclick="startEditing">
+            <h3>{{ todo.titre }}</h3>
+        </div>
+        <input
+            v-else
+            v-model="edited"
+            @blur="saveEdit"
+            @keyup.enter="saveEdit"
+            ref="editInput"
+        />
         <p>  Etat: {{ props.todo.etat}}</p>
         <p>  Date: {{ props.todo.date? todo.date : 'Imprécis'}}</p>
         <button @click="deleteTodo">Delete {{ props.todo.titre }}</button>