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

Stack Overflow用户

提问于 2019-08-04 04:03:34

回答 1查看 38关注 0票数 1

我在JavaScript并不是最好的，但是我遇到了一个复杂的挑战，我很难弄清楚。

我需要完成以下三件事：

通过一个对象数组循环并显示办公室名称
显示每个office未解决的票/问题的数量
，然后我将使用office作为vue路由器的param，稍后我们可以忽略它，因为我现在的重点是项目1和2。

我的JSFIDDLE demo

下面是我的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给出了办公室，但是有些办公室列出了两次(例如“蓝色”office)。我如何过滤这个数组并且只显示每个办公室一次？我想尝试一下.reduce()，但是我的尝试没有成功。感谢任何能帮忙的人！

vuejs2

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-04 05:20:31

你和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/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57343704

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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