add key handlers

DanZalov · Mar 10, 2024 · 51c3047 · 51c3047
1 parent 9627697
commit 51c3047
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/src/components/TaskForm.vue b/src/components/TaskForm.vue
@@ -14,7 +14,7 @@ if (props.taskId) {
 
 const isNew = !props.taskId
 
-const submitForm = () => {
+function submitForm() {
   if (newTitle.value) {
     if (isNew) {
       store.addTask({ title: newTitle.value, id: Date.now().toString() })
@@ -25,11 +25,23 @@ const submitForm = () => {
     newTitle.value = ''
   }
 }
+
+function escHandler() {
+  newTitle.value = ''
+  emit('close')
+}
 </script>
 
 <template>
   <div class="task">
-    <input type="text" v-model="newTitle" placeholder="Название задачи" required />
+    <input
+      type="text"
+      v-model="newTitle"
+      placeholder="Название задачи"
+      @keydown.enter="submitForm"
+      @keydown.esc="escHandler"
+      required
+    />
     <button type="submit" :class="isNew ? 'primary' : 'green'" @click="submitForm">
       {{ isNew ? 'Добавить' : 'Обновить' }}
     </button>