vue.js - 단일 결과로 여러 결과를 표시하는 Lodash 기능

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/[email protected]/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>