How to avoid duplicate values in the output of v-for loop in vuejs

Question

I want to remove or filter out the duplicate values in the output of my v-for loop. So, that 'John' appears only once instead of appearing twice in the output. Is that possible to do in vuejs ?

JS

var app = new Vue({
             el: "#app",
             data: function () {
                     return {
                       searchFields: ['number', 'name'],
                       search: '',
                       items: [
                               { name: 'Mary'},
                               { name: 'John'},
                               { name: 'John'},
                               { name: 'William'}
                             ]
                      };
             }
});

Codepen

MMachinegun · Accepted Answer · 2016-07-25 18:59:06Z

3

So by checking the filters-documentation you can see that you can write your own custom filters.

So by having myFilter you can define what you want to have in a method.

v-for="item in items | filterBy myFilter">

Now adding the method it should something like this:

let arr = [];

var app = new Vue({
  el: "#app",
  data: function () {
    return {
      searchFields: ['number', 'name'],
      search: '',
      items: [
        { name: 'Mary'},
        { name: 'John'},
        { name: 'John'},
        { name: 'William'}
      ]
    };
  },
  // this is where your filter method is defined
  methods: {
    myFilter: function(val) {
      if(arr.indexOf(val.name) === -1) {
        arr.push(val.name);
        return val.name;
      }
    }
  }
});

What this does is check if your value is in your array arr. If not, it adds it to the array, preventing duplicate items appearing later on.

So only if your item.name hasn't been displayed already, your filter returns the name to the view.

Check it out

*Maybe there is a nicer/easier solution to this, but good enough for now :)

answered Jul 25, 2016 at 18:59

MMachinegun

3,0942 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saif Islam Over a year ago

hey @marczking...did u test ? your pen is not working !! it is just showing {{item.name}} in the output...check please

MMachinegun Over a year ago

what do you mean? If I open the pen it displays 3 names instead of 4. It's working for me :S maybe there is an other error I'm not getting?

MMachinegun Over a year ago

the search seams not be working. I'll have a look a little later

Himmet Avsar · Accepted Answer · 2016-07-26 22:16:25Z

2

Vuejs filterBy provides 3 arguments to the filter function: value of the current item, the index of the item and the whole array. Following works without a temporary array:

methods: {
        myFilter: function (val, idx, arr) {
          for(var i = 0; i < idx; i++) {
            if(arr[i].name === val.name) {
              return false;
            }
          }
          return true;
        } 
      }

answered Jul 26, 2016 at 22:16

Himmet Avsar

1,53116 silver badges23 bronze badges

1 Comment

Saif Islam Over a year ago

excellent solution man...this works even more perfect than the above one...because I do not need a temporary array in this case....simple awesome solution...thanks @himmet avsar...cheeers !!1

tony19 · Accepted Answer · 2022-07-15 01:20:13Z

0

I used a computed value, as suggested by the Vuejs guide: https://v2.vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results

computed: {
    uniqueNames: function() {
      var filtered_array = [];
      for(var i =0; i < this.items.length; i++) {
        if(filtered_array.indexOf(this.items[i].name) === -1) {
          filtered_array.push(this.items[i].name)
        }
      }
    return filtered_array;
    }
  }

With this v-for:

v-for="name in uniqueNames"

See my codepen

edited Jul 15, 2022 at 1:20

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 5, 2017 at 13:48

roverv

891 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to avoid duplicate values in the output of v-for loop in vuejs

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related