클릭 시 중첩된 JSON-Data 탐색

클릭 시 중첩된 JSON-Data 탐색

상황

필터링하고 재정렬하고 싶은 복잡한 JSON 데이터가 있어.내 데이터는 깊이 중첩된 프로젝트 모음입니다.각 프로젝트에는task_lists , , , 포함이 되어 있다.tasks.

그래서 나의 JSON-tree의 구조는 대략 다음과 같다: 프로젝트 → task_lists → tasks → tasks.

이루고 싶은 결과

나의 목표는 각 프로젝트마다 카드 그리드를 보는 것이다.프로젝트 카드의 버튼을 클릭하면 보기를 변경하고 선택한 프로젝트의 작업 목록과 뒤로 버튼을 표시하고자 한다.업무 목록을 클릭하면 보기를 변경하여 선택한 업무 목록의 업무와 뒤로 버튼을 표시하고자 한다.작업을 클릭하면 카드의 상세 뷰와 백버튼을 보여주고 싶다.

코드 샘플

JSON은 매우 크고 가독성이 낮기 때문에 StackOverflow에서는 코드 샘플을 제공하는 것이 어렵다.나는 내 데이터가 어떻게 생겼는지 더 잘 설명하기 위해 코드샌드박스를 준비했다.프로젝트를 파일을 통해 가져오기projects.json소박하게

지금까지 노력한 것

중첩된 구성요소를 만들었지만 JSON 트리를 위아래로 가로지르지 못했다.그리고 나서 나는 vue 라우터를 통합하려고 했지만, 데이터를 경로에 연결하는 방법을 몰랐다.

질문

이러한 상황에서 최선의 실천 방법은 무엇인가?

먼저 3페이지의 Vue-Router를 생성하십시오. 먼저 프로젝트 목록을 표시하는 홈 페이지와 프로젝트 페이지의 두 번째 페이지, 그리고 세 번째 페이지가 작업 목록 페이지가 됨

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

추가하다Project을 이해하게 되는 페이지projectId매개변수로부터, 그리고 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, 를 누를 경우Go Back의 단추를 잠그다Project페이지, 다시 로 돌아갈 것이다.Home페이지 :

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

그리고 만약 당신이 누르면.Go Back의 단추를 잠그다TaskLists페이지, 다시 로 돌아갈 것이다.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

참조URL: https://stackoverflow.com/questions/63866455/navigate-through-nested-json-data-on-click