From e6985d0e89a839192dfb2deeecf1740f9e0b03e3 Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Thu, 11 Feb 2021 10:10:46 -0800
Subject: [PATCH] 14.05 Click and Hold a Task to Edit with v-touch-hold
 Directive

---
 src/components/Tasks/Task.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Tasks/Task.vue b/src/components/Tasks/Task.vue
index 9334a88..62fdbfa 100644
--- a/src/components/Tasks/Task.vue
+++ b/src/components/Tasks/Task.vue
@@ -2,6 +2,7 @@
   <q-item
     @click="updateTask({ id: id, updates: { completed: !task.completed}})"
     :class="!task.completed ? 'bg-orange-1' : 'bg-green-1'"
+    v-touch-hold:1000.mouse="showEditTaskModal"
     clickable
     v-ripple>
     <q-item-section side top>
@@ -45,7 +46,7 @@
     <q-item-section side>
       <div class="row">
         <q-btn
-          @click.stop="showEditTask = true"
+          @click.stop="showEditTaskModal"
           flat
           round
           dense
@@ -95,6 +96,9 @@ export default {
       }).onOk(() => {
         this.deleteTask(id)
       })
+    },
+    showEditTaskModal () {
+      this.showEditTask = true
     }
   }
 }