14.05 Click and Hold a Task to Edit with v-touch-hold Directive

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
     }
   }
 }