[Vuejs]-Vue.js API filtering unique items for select and removing null/empty values

by

0👍

✅

From https://stackoverflow.com/a/12551750/5877209

computed: {
     options() {
       const unique_ids = this.links.filter(function(key){
          if (!this[key.id]) { this[key.id] = 1;return key.id;}},
                {}
                );
          return unique_ids;

  },
}

0👍

to filter by link.id so it is not duplicate and null or undefined try following:

make a computed value named options

computed: {
  options() {
    const unique_ids = [ ...new Set(  // make list of unique ids
               this.links
               .filter(link => Boolean(link.id)) // removes falsey like null
               .map(link => link.id)) // returns id only
             ];
    return this.links.filter(link => unique_ids.includes(link.id));

  },
}

use this computed property options in your select options like this

<select id="linktypelist" v-model="linkitem">
    <option disabled value="0">Select or Add</option>
    <option v-for='link in options' :key="link.id" >{{ link.linked_from_typedesc }}</option>
</select>

Leave a comment