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

Question

我正在使用计算属性来筛选值数组，并仅从数组中提取一组唯一项。最初我只需要它用于一个变量，但现在我需要用它来提取两个不同的值，并且在制作两个计算属性时无法让它彼此独立工作。

这是我的 Vue HTML 代码:

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

函数如下:

 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] 

但是当我尝试创建另一个计算属性来做同样的事情时，但只适用于 brands，一切都崩溃了，我变得不确定。我怎样才能调整这个计算属性，以便我可以过滤掉这个数组中的所有其他唯一值？

我已经尝试了所有方法，但无法解决。在此先感谢您的帮助!

Answer 1

对于唯一性的基本检查

对于这样的数组:

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

您可以使用此处所述的 2 过滤器功能: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())

这也可以作为 vue 中的计算函数...

vue 使用临时数组的解决方案

另一种解决方案可能是创建一个临时数组来计算您要使用的独特汽车/品牌对...

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>