Whenever I click on a specific "task," it loads correctly and the correct UI with data is displayed. The issue arises when clicking on the link through the browser input window - localhost:port/task/edit/id, or when manually refreshing the page for each "task". How can this problem be resolved?
router.js:
{
path: '/task/edit/:id',
name: 'edit-task',
component: EditView,
},
Snippet of code featuring EditView:
<template>
<div>
<task-edit :task="task" v-if="task" :key="taskId"/>
<p v-else>Loading task...</p>
</div>
</template>
<script>
export default {
name: 'EditView',
components: {
TaskEdit,
},
computed: {
...mapState(['tasks']),
taskId() {
return this.$route.params.id;
},
task() {
return this.tasks.find((task) => task.id === this.taskId);
},
},
async created() {
await this.$store.dispatch('retrieveTaskById');
},
};
</script>
store.js with actions for loading tasks:
...
retrieveTaskById({ state }, taskId) {
console.log('Loading task from localStorage...');
state.tasks.find(task => {
console.log(task.id, 'Task loaded')
return task.id === taskId
});
},
...
Below are the console.log outputs when manually navigating to the "edit" page:
Loading tasks from localStorage...
Here are the outputs when navigating from the "home" page:
Loading task from localStorage... 1 'Task loaded'