如何将对象项添加到计算的属性项以放置在路径参数中？

Question

我有一个单页应用程序，该应用程序发出GET请求，并接收一个名为`offices'的对象数组，这些对象是办公室名称及其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对象。

我想将其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
  }

但是，unresolvedIssuesGroupedByOffice计算出的属性不包含office_id。如何将其与办公室“关联”，以便将office_id附加到端点？我希望这能使我理解。谢谢！

Answer 1

更新：

您还可以将 prop 添加到对象，而不是在计算属性上推送issuewith only prop ：officeoffice _idissue

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