单击时浏览嵌套的 JSON 数据答案

【问题标题】：Navigate through nested JSON-Data on click单击时浏览嵌套的 JSON 数据
【发布时间】：2020-12-31 02:55:28
【问题描述】：

情况

我有想要过滤和重新排列的复杂 JSON 数据。我的数据是一个深度嵌套的项目集合。每个项目都有task_lists，其中包含tasks。

所以我的 JSON-tree 的结构大致是这样的：projects → task_lists → tasks

我想要达到的结果

我的目标是查看每个项目的卡片网格。如果我单击项目卡中的按钮，我想更改视图并显示所选项目的任务列表和后退按钮。如果我单击任务列表，我想更改视图并显示所选任务列表的任务和一个后退按钮。如果我点击任务，我想显示卡片的详细视图和返回按钮。

代码示例

由于 JSON 非常大且可读性差，因此很难在 StackOverflow 上提供代码示例。我准备了a CodeSandbox to better describe how my data looks like。为简单起见，这些项目通过文件projects.json 导入。

到目前为止我尝试了什么

我创建了嵌套组件，但没有设法上下遍历 JSON 树。然后我尝试集成一个vue路由器，但不知道如何将数据连接到路由。

问题

对于这种情况，最佳实践方法是什么？

【问题讨论】：

标签： json vue.js vuejs2 vue-component vue-router

【解决方案1】：

首先创建具有 3 个页面的 vue-router，第一个用于显示您的项目列表的主页，第二个页面用于项目页面，第三个将是您的 TaskLists 页面

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
  }
];

所以您的App.vue 将只包含<router-view>，而您的主页将移动到Home.vue。

然后添加Project.vue组件在点击查看项目时推送到项目页面，还需要发送projectId作为参数

showProject(id) {
      this.$router.push({
        name: "project",
        params: {
          projectId: this.project.id
        }
      });
    }

添加从参数获取projectId 的Project 页面，并从JSON 中查找数据，我为此使用了计算属性

  props: ["projectId"],
  computed: {
    project() {
      return projectsData.find(p => p.id === parseInt(this.projectId, 10));
    }
  },

添加与项目页面类似的TaskLists 页面，但您只是显示任务列表。

  props: ["projectId"],
  computed: {
    taskLists() {
      return projectsData.find(p => p.id === parseInt(this.projectId, 10))
        .task_lists.data;
    }
  },

对于返回按钮，只需使用router-link，如果您在Project 页面上按Go Back 按钮，它将返回到Home 页面：

<router-link :to="{name:'home'}">Go back</router-link>

如果你在TaskLists页面上按下Go Back按钮，它将返回Project页面并传递projectId作为参数：

<router-link :to="{name:'project', params: {projectId}}">Go back</router-link>

完整的工作示例：https://codesandbox.io/s/how-to-navigate-through-nested-json-forked-fd27x

【讨论】：