我有一个单页应用程序,该应用程序发出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模板将所有这些呈现到表中,如下所示:
Office
Number of Unresolved Issues
{{ branch }}
{{ issues.length }}
这是呈现的表格的图像:
这是我的问题:[使用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附加到端点?我希望这能使我理解。谢谢!