Vue.js - 通过计算属性从数组中获取唯一值

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');