경로 매개 변수에 배치할 계산된 속성 항목에 개체 항목을 추가하는 방법

경로 매개 변수에 배치할 계산된 속성 항목에 개체 항목을 추가하는 방법

나는 GET 요청을 하는 단일 페이지 앱을 가지고 있으며, 다음과 같은 사무실 이름과 ID의 목록인 '오피스'라는 이름의 오브젝트를 받는다.

offices: [
      { office: "Blue", office_id: 1 },
      { office: "Orange", office_id: 2 },
      { office: "Red", office_id: 3 }
    ]

또한 이름이 붙은 계산된 속성이 있다.unresolvedIssuesGroupedByOffice다음과 같은 데이터를 반환한다.

{
   "Blue":[
      {
         "issue_id":"232121",
         "branch":"Blue"
      },
      {
         "issue_id":"231131",
         "branch":"Blue"
      }
   ],
   "Orange":[
      {
         "issue_id":"332111",
         "branch":"Orange"
      },
      {
         "issue_id":"333141",
         "branch":"Orange"
      }
   ],
   "Red ":[
      {
         "issue_id":"224444",
         "branch":"Red "
      },
      {
         "issue_id":"111111",
         "branch":"Red "
      }
   ]
}

그러면 HTML 템플릿이 이 모든 것을 다음과 같은 표로 렌더링:

<table style="width:100%">
      <tr>
        <th>Office</th>
        <th>Number of Unresolved Issues</th>
      </tr>
      <tr v-for="(issues, office) in unresolvedIssuesGroupedByOffice" :key="office">
        <td><router-link
                :to="{
                  name: 'unresolved-issues-by-office-list',
                  params: { office_id: '' }<----- how to get the office id here?
                }"
                >{{ branch }}</router-link
              ></td>
        <td>{{ issues.length }}</td>
      </tr>
    </table>

렌더링된 테이블의 모양은 다음과 같다.

제 질문은 다음과 같다: [쇼앤텔을 위한 JSFIDDLE 사용]

다음과 같은 엔드포인트를 사용할 수 있는 경우:/unresolvedIssuesGroupedByOffice/{office_id}그 사무실에서 해결되지 않은 모든 문제의 JSON 개체를 반환할 것이다.

I want to use the.office_id사용자가 테이블에서 사무실 이름을 누르고 내 사무실로 이동할 수 있도록 경로 매개 변수로 사용unresolved-issues-by-office관람하다

  {
    path: '/reports/unresolved-issues-by-office/:office_id',
    name: 'unresolved-issues-by-office',
    component: () =>
      import(/* webpackChunkName: "test" */ './components/UnresolvedIssuesByOfficeList.vue'),
    props: true
  }

그러나 계산된 속성은 를 포함하지 않는다. Office_id를 끝점에 추가하기 위해 어떻게 사무실과 "연결"할 수 있는가?나는 이것이 내가 말하고자 하는 것을 이해하기를 바란다.고마워!

업데이트:

더 밀어붙이는 대신issue단 한 가지 않고office당신의 계산된 재산에 대한 소견...추가할 수도 있음office _id을 지지하다issue객체:

unresolvedIssuesGroupedByOffice() {
  return this.unresolvedIssues.reduce((groups, issue) => {
    issue.office_id = this.offices.find((off) => off.office == issue.office).office_id
    let office = groups[issue.office] || []
    office.push(issue)
    groups[issue.office] = office
    return groups
  }, {})
}

및 템플릿:

<table style="width:100%">
  <tr>
    <th>Office</th>
    <th>Office_id</th>
    <th>Number of Unresolved Issues</th>
  </tr>
  <template v-for="(issues,office) in unresolvedIssuesGroupedByOffice">
        <tr v-for="issue in issues">
          <td>{{issue.office}}</td>
          <td>{{issue.office_id}}</td>
          <td>{{issues.length}}</td>
        </tr>
      </template>
</table>

여기 Jsfiddle이 있다.

또는:

다음 작업을 수행하는 방법(템플릿에서 메서드를 호출하는 방법은 좋은 아이디어가 아니므로 권장되지 않음)을 사용하십시오.office논쟁으로서 그리고 그것은 그 배열을 보고 일치된 것을 반환할 것이다.id그러기 위해서office:

 methods : {
  getOfficeId(off){
        return this.offices.find((office) => office.office == off).office_id
    }
 }

계속하여router-view:

<tr v-for="(issues, office) in unresolvedIssuesGroupedByOffice" :key="office">
  <td>
    <router-link :to="{
                  name: 'unresolved-issues-by-office-list',
                  params: { office_id: getOfficeId(office) }
                }">{{ branch }}</router-link>
  </td>
  <td>{{ issues.length }}</td>
</tr>

여기 Jsfiddle이 있다.

참조URL: https://stackoverflow.com/questions/57351574/how-to-add-object-items-to-a-computed-property-item-for-placement-in-a-route-par