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

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>

这是渲染表的外观图像:


这是我的问题:[with 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

更新:

而不是推issue只有 office你的计算属性上的 Prop ...你也可以添加 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