作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个单页应用程序,它发出一个 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 "
}
]
}
<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>
/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 附加到端点? 我希望这能理解我想说的话。谢谢!
最佳答案
更新:
而不是推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>
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>
关于vuejs2 - 如何将对象项添加到计算属性项以放置在路由参数中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57351574/
我是一名优秀的程序员,十分优秀!