Tutorials/Quasar_Todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Fredrick W Warren 2021-02-11 10:10:46 -08:00
parent b145fc29c6
commit e6985d0e89
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Tasks/Task.vue
View File

@ -2,6 +2,7 @@
<q-item <q-item
@click="updateTask({ id: id, updates: { completed: !task.completed}})" @click="updateTask({ id: id, updates: { completed: !task.completed}})"
:class="!task.completed ? 'bg-orange-1' : 'bg-green-1'" :class="!task.completed ? 'bg-orange-1' : 'bg-green-1'"
v-touch-hold:1000.mouse="showEditTaskModal"
clickable clickable
v-ripple> v-ripple>
<q-item-section side top> <q-item-section side top>
@ -45,7 +46,7 @@
<q-item-section side> <q-item-section side>
<div class="row"> <div class="row">
<q-btn <q-btn
@click.stop="showEditTask = true" @click.stop="showEditTaskModal"
flat flat
round round
dense dense
@ -95,6 +96,9 @@ export default {
}).onOk(() => { }).onOk(() => {
this.deleteTask(id) this.deleteTask(id)
}) })
},
showEditTaskModal () {
this.showEditTask = true
} }
} }
} }