I have a Todo application built in Vue that may seem slightly overwhelming. Here's the link to the repository: https://github.com/jaiko86/subtasks
All the todo items are managed within the following store structure:
export default {
state: {
workspaceIds: [], // IDs of workspaces
tasksById: {}, // This is where all the tasks are stored
detachedTask: null,
focusedTaskId: null,
currentWorkspaceId: null,
},
...
}
Within the App.vue file, there is a computed property that runs through the tasks as defined by the v-for:
computed: {
taskIds() {
const { currentWorkspaceId, tasksById } = this.$store.state;
if (this.showOnlyLeafSubTasks) {
return Object.values(tasksById)
.filter(task => !task.subTaskIds.length)
.map(task => task.id);
} else if (currentWorkspaceId) {
return tasksById[currentWorkspaceId].subTaskIds;
}
},
},
This computed property filters and returns a list of relevant tasks based on specific conditions like the current workspace. Each task has a unique ID formatted as task-#, with its input placeholder displaying the task ID.
The template in App.vue includes:
<template>
<div id="app">
<!-- Workspace Navigation -->
<WorkspaceNav />
<!-- Content Display -->
<TaskWrapper v-for="id in taskIds" :key="id" :id="id" :depth="0" />
<!-- Additional Filters -->
<TaskFilters />
</div>
</template>
However, there seems to be an issue with rendering the items returned by the computed property.
Despite the console showing the correct data, and the Vue dev tool indicating the expected output, the view itself displays incorrect results.
For better visualization: https://i.sstatic.net/1sc5a.png
VUE Dev Tool Snapshot: https://i.sstatic.net/l5537.png
Console Output after selecting the <App> component in the dev tool:
"["task-1", "task-2"]"
A custom function for hierarchical printing has been implemented:
> printTree()
task-0
task-1
task-2
The DOM structure related to the code snippet in question looks something like this:
<div id="app">
<div class="workspace-nav">
...
</div>
<div data-v-76850a4a="" data-v-7ba5bd90="" class="leaf">
<div data-v-76850a4a="" class="main-task depth-0">
<!---->
<div class="progress-indicator">
<div class="checkmark gray-checkmark"></div>
</div>
<input placeholder="task-1" />
</div>
<div class="sub-tasks"></div>
</div>
<div class="filters">
...
</div>
</div>
Despite having two items in the taskIds array, only one item is being rendered visibly, causing confusion and discrepancy between the actual data and its representation.