Lodash 函数将多个结果显示为一个唯一的结果答案

【问题标题】：Lodash function to display multiple result into a single unique oneLodash 函数将多个结果显示为一个唯一的结果
【发布时间】：2018-03-15 03:35:01
【问题描述】：

<span v-for="r in results" >{{ r.owner.first_name }} {{ r.owner.last_name}} </span>

我只需要在一次出现时显示结果。

因此，使用该代码我会得到：

John Doe 

John Doe 

John Doe

我只需要与一个所有者一起展示它：

John Doe

有可能吗？

【问题讨论】：

标签： vue.js vuejs2 lodash

【解决方案1】：

创建一个 computed property 即 this.results 没有重复项（假设 Lodash > 4.0.0）：

computed: {
  resultsUniqueNames() {
    return _.uniqBy(this.results, function (r) {
      return r.owner.first_name + r.owner.last_name;
    });
  }
}

然后像这样使用它：

<span v-for="r in resultsUniqueNames">{{ r.owner.first_name }} {{ r.owner.last_name}} </span>

演示：

new Vue({
  el: '#app',
  data: {
    results: [
      {owner: {first_name: 'John', last_name: 'Doe'}},
      {owner: {first_name: 'John', last_name: 'Doe'}},
      {owner: {first_name: 'John', last_name: 'Doe'}}
    ]
  },
  computed: {
    resultsUniqueNames() {
      return _.uniqBy(this.results, function(r) {
        return r.owner.first_name + r.owner.last_name;
      });
    }
  }
})

span { display: block; }

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>

<div id="app">
  Using results:
  <span v-for="r in results">{{ r.owner.first_name }} {{ r.owner.last_name}} </span>
  <hr>
  Using resultsUniqueNames:
  <span v-for="r in resultsUniqueNames">{{ r.owner.first_name }} {{ r.owner.last_name}} </span>
</div>

【讨论】：