Lodash function to display multiple result into a single unique one

Question

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

I need to display the result of that in a single occurence only.

So with that code I would get:

John Doe 

John Doe 

John Doe 

I just need to display it with just one owner:

John Doe

Is it possible?

Answer 1

Create a computed property that is this.results without duplicates (assuming Lodash > 4.0.0):

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

And then use it like:

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

Demo:

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>