Vue.js - Unique values from an array through a computed property

Question

I am using a computed property to filter through an array of values and pull out only a set of unique items from within the array. Originally I only needed it for one variable but I need to use it to pull two different values now and can't get it to work independently of each other when making two computed properties.

Here's my Vue HTML code:

<div v-for="item in getUniques">
<input :value="item.car" v-model="selectedCars" type="checkbox">
<label>&nbsp;{{item.car}}</label>
</div>

Here's the function:

 data(){
      return {

selectedCars: [],
prefetch: [
           {car: "XC90", brand: "Volvo"},
           {car: "XC60", brand: "Volvo"},
           {car: "XC90", brand: "Volvo"},
           {car: "X-Type", brand: "Jaguar"}   
          ]
 }
},


computed: {

getUniques(){

                return this.prefetch.reduce((seed, current) => {

                    return Object.assign(seed, {
                        [current.car]: current
                    });

                }, {});

            },

}


// This works perfectly for pulling out the unique values of cars and returns... [XC90,XC60, X-Type] 

But when I try to create another computed property to do the same, but only work with brands, everything breaks and I get undefined. How can I tweak this computed property so I can filter out all the other unique values in this array?

I've tried everything and can't work it out. Thanks in advance for any help!!

Answer 1

For the basic check for uniques

For an array like:

let prefetch = [
  {car: "XC90", brand: "Volvo"},
  {car: "XC60", brand: "Volvo"},
  {car: "XC90", brand: "Volvo"},
  {car: "X-Type", brand: "Jaguar"}   
 ]

You could use 2 the filter function as stated here: Get all unique values in a JavaScript array (remove duplicates)

let prefetch = [
  {car: "XC90", brand: "Volvo"},
  {car: "XC60", brand: "Volvo"},
  {car: "XC90", brand: "Volvo"},
  {car: "X-Type", brand: "Jaguar"}   
 ]

 function getUniqueCars() {
   return prefetch.map(x => x.car).filter((v,i,s) => s.indexOf(v) === i)
 }

 function getUniqueBrands() {
  return prefetch.map(x => x.brand).filter((v,i,s) => s.indexOf(v) === i)
 }

 console.log(getUniqueCars())
 console.log(getUniqueBrands())

This also works as a computed function within vue...

A solution for vue using a temporary Array

Another solution could be the creation of a temporary Array to calculcate the unique car/brand pairs you want to use...

let vm = new Vue({
  el: '#app',
  data() {
    return {
      selectedCars: [],
      prefetch: [{
          car: "XC90",
          brand: "Volvo"
        },
        {
          car: "XC60",
          brand: "Volvo"
        },
        {
          car: "XC60",
          brand: "Volvo"
        },
        {
          car: "XC90",
          brand: "Volvo"
        },
        {
          car: "X-Type",
          brand: "Jaguar"
        }
      ]
    }
  },
  computed: {
    getUniques() {
      let tempArray = [];
      for (let item of this.prefetch) {
        (tempItem => {
          if (!(tempItem.length > 0 && tempItem.find(x => x.brand === item.brand))) tempArray.push(item);
        })(tempArray.filter(x => x.car === item.car))
      }
      return tempArray;
    }
  }
})

<div id="app">
  <div v-for="item in getUniques">
    <input :value="item.car" v-model="selectedCars" type="checkbox">
    <label>&nbsp;{{item.brand}} {{item.car}}</label>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 2

you can use lodash's uniq

and do

return _.uniqBy(this.prefetch, 'car');