Question

我不是JavaScript方面的佼佼者，但是遇到了一个复杂的挑战，我很难弄清楚。

我需要完成以下三件事：

浏览一组对象并显示办公室名称
显示每个办公室的未解决票证/问题数量
然后我将把Office ID用作vue路由器的参数...但由于我的重点仅放在项目1和2上，因此我们现在可以忽略它。

这是我的HTML模板：

<div id="app">
  <div>
    <table>
  <tr>
    <th>Office</th>
    <th>Number of Unresolved Issues</th> 
  </tr>
  <tr v-for="office in unresolvedIssues" :key="office.issueId">
    <td>{{office.office}}</td>
    <td></td> 
  </tr>
</table>
  </div>
</div>

然后是我的Vue代码：

new Vue({
  el: "#app",
  data: {
    unresolvedIssues: [
      { issueId: "12345", status: 7, office: "blue" },
            { issueId: "56781", status: 7, office: "orange" },
      { issueId: "23145", status: 7, office: "red" },
      { issueId: "12311", status: 7, office: "blue" },
      { issueId: "33144", status: 7, office: "orange" },
      { issueId: "33244", status: 7, office: "yellow" },
    ],
    offices: [
        { office: 'blue', office_id: 3 },
      { office: 'red', office_id: 1 },
      { office: 'orange', office_id: 2 },
      { office: 'yellow', office_id: 4 },
    ]

  },
  methods: {
  }
})

在我上面的代码中，v-for给了我办公室，但是有些办公室被列出了两次（例如“蓝色”办公室）。我将如何过滤此数组并只显示每个办公室一次？我想到尝试.reduce（），但是我的尝试没有用。感谢任何可以提供帮助的人！

Answer 1

使用reduce使您处在正确的轨道上。而且由于您正在使用Vue，所以最好也将其放入计算属性中：

computed: {
  unresolvedIssuesGroupedByOffice() {
    return this.unresolvedIssues.reduce((groups, issue) => {
      let office = groups[issue.office] || []
      office.push(issue)
      groups[issue.office] = office
      return groups
    }, {})
  }
}

您更新的小提琴：https://jsfiddle.net/7g8zL2nw/

遍历对象数组，隐藏重复项并显示项目数？

1 个答案: