samples/vue-todo
3
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases 2 Wiki Activity

fixed delete task reloading app

Browse Source
This commit is contained in:
Markus Thielen 2023-11-01 16:32:58 +01:00
parent b387643068
commit 5e5c4033f8
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Todo.vue
View File

@ -37,7 +37,7 @@
<div id="todo-container"> <div id="todo-container">
<transition-group name="list" tag="div"> <transition-group name="list" tag="div">
<div :class="todoItemClass(task)" v-for="(task, i) in filteredItems" :id="'task-' + task.id" :key="task.id"> <div :class="todoItemClass(task)" v-for="(task, i) in filteredItems" :id="taskElId(task)" :key="i">
<div :class="todoCheckedClass(task)" @click="toggleCompleted(task)"> <div :class="todoCheckedClass(task)" @click="toggleCompleted(task)">
&nbsp; &nbsp;
</div> </div>
@ -51,7 +51,7 @@
<i class="bi bi-trash"></i> <i class="bi bi-trash"></i>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a class="dropdown-item" href="" @click="deleteTask(task)">Delete this item</a></li> <li><span class="dropdown-item" @click="deleteTask(task)">Delete this item</span></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -95,6 +95,13 @@ export default {
methods: { methods: {
/**
* Return element ID for a task container.
*/
taskElId(task) {
return `task-${task.id}`;
},
/** /**
* Save a task to the database. * Save a task to the database.
* @param task the task to save; this is an object as received from the broker. * @param task the task to save; this is an object as received from the broker.
@ -157,7 +164,7 @@ export default {
*/ */
deleteTask(task) { deleteTask(task) {
if (task.id !== NEW_TASK_ID) { if (task.id !== NEW_TASK_ID) {
/* Task must be also deleted from the server */ /* Delete task from basebox */
gqlRequest(`mutation { gqlRequest(`mutation {
deleteTask(id: "${task.id}") { deleteTask(id: "${task.id}") {
id id