Reputation: 2499
I have complex JSON-data that I want to filter and rearrange. My data is a deeply nested collection of projects. Each project has task_lists
, which contain tasks
.
So the structure of my JSON-tree is roughly like this: projects → task_lists → tasks
My goal is to view a grid of cards for each project. If I click on a button in project-card I want to change view and show the tasklists of the chosen project and a back-button. If I click on a tasklist, I want to change view and show the tasks of the chosen tasklist and a back-button. If I click on the task, I want to show a detail view of the card and a back-button.
As the JSON is very big and not very readable it is hard to provide a code sample here on StackOverflow. I prepared a CodeSandbox to better describe how my data looks like. The projects are imported via the file projects.json
for the sake of simplicity.
I created nested components, but didn't manage to traverse the JSON tree up and down. Then I tried to integrate a vue router, but didn't know how to wire data to the routes.
What would be a best practice approach for this situation?
Upvotes: 0
Views: 142
Reputation: 6853
First create vue-router with 3 pages, first for your home page that shows your project list, and 2nd page for the project page, and 3rd will be your TaskLists page
const routes = [
{
name: "home",
path: "/",
component: () => import("./pages/Home.vue")
},
{
name: "project",
path: "/project/:projectId",
component: () => import("./pages/Project.vue"),
props: true
},
{
name: "taskLists",
path: "/project/:projectId/tasks",
component: () => import("./pages/TaskLists.vue"),
props: true
}
];
So your App.vue
will only contain <router-view>
, and your main page will be moved to Home.vue
.
Then add on Project.vue
component to push to project page when you click View project, you also need to send the projectId
as parameter
showProject(id) {
this.$router.push({
name: "project",
params: {
projectId: this.project.id
}
});
}
Add Project
page that get the projectId
from parameter, and find the data from JSON, I used computed property for this
props: ["projectId"],
computed: {
project() {
return projectsData.find(p => p.id === parseInt(this.projectId, 10));
}
},
Add TaskLists
page which works similarly with Project page, but you just showing the Task Lists.
props: ["projectId"],
computed: {
taskLists() {
return projectsData.find(p => p.id === parseInt(this.projectId, 10))
.task_lists.data;
}
},
For the go back button, simply use router-link
, where if you press Go Back
button on Project
page, it will go back to Home
page:
<router-link :to="{name:'home'}">Go back</router-link>
And if you press Go Back
button on TaskLists
page, it will go back to Project
page and pass projectId
as the parameter:
<router-link :to="{name:'project', params: {projectId}}">Go back</router-link>
Full working example: https://codesandbox.io/s/how-to-navigate-through-nested-json-forked-fd27x
Upvotes: 1