Question

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

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

所以使用该代码我会得到：

John Doe 

John Doe 

John Doe

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

John Doe

有可能吗？

Answer 1

创建一个computed property，this.results没有重复项（假设Lodash＆gt; 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>

Lodash功能可将多个结果显示为一个唯一的结果

1 个答案: