Vue.js中如何去除v-for循环里过滤后对象数组的重复值

要去掉选中客户端后重复的采购类型选项，你可以通过修改计算属性实现去重，以下是具体方案：

方法一：利用Set快速去重（代码简洁，推荐） #

修改Vue实例的计算属性，替换原有的filteredPurchase为去重后的结果：

var app = new Vue({
  el: "#app",
  data() {
    return {
      clientId: 0,
      clients: [{
          "id": 1,
          "clientName": "Rafael Ellison"
        },
        {
          "id": 2,
          "clientName": "Tad Beasley"
        },
      ],
      categories: [{
          "clientId": 1,
          "purchaseType": "Purchase Type  1"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type  1"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type 2"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type 2"
        },
        {
          "clientId": 2,
          "purchaseType": "Purchase Type 2"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type 3"
        },
        {
          "clientId": 1,
          "purchaseType": "Purchase Type 3"
        },
        {
          "clientId": 2,
          "purchaseType": "Purchase Type 3"
        },
        {
          "clientId": 1,
          "purchaseType": "In veritatis anim al"
        }
      ],
    }
  },
  computed: {
    uniquePurchaseTypes() {
      // 1. 筛选当前选中客户端的分类数据
      const filtered = this.categories.filter(item => item.clientId == this.clientId);
      // 2. 提取purchaseType并用Set去重，再转回数组
      const uniqueTypes = [...new Set(filtered.map(item => item.purchaseType))];
      // 转成对象数组，保持和原数据结构一致方便渲染
      return uniqueTypes.map(type => ({ purchaseType: type }));
    },
  }
});

修改HTML渲染部分 #

原代码中categories数组没有id字段，所以key属性不能用purchase.id，需要改成唯一的purchaseType；同时把v-for绑定的数据源换成去重后的uniquePurchaseTypes：

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

  <div>
    <div>
      <label>Under Client</label>
      <select v-model="clientId">
        <option value="" selected>select clients</option>
        <option v-for="client in clients" :key="client.id" :value="client.id">{{client.clientName}}</option>
      </select>

    </div>

    <div>
      <label for="purchaseCategoryId">Purchase Type</label>
      <div class="input-group">
        <select multiple>
          <option value="" selected>select purchase Type</option>
          <option v-for="purchase in uniquePurchaseTypes" :key="purchase.purchaseType" :value="purchase.purchaseType">{{purchase.purchaseType}}</option>
        </select>
      </div>
    </div>
  </div>

</div>

方法二：用对象去重（适合需要保留完整分类对象的场景） #

如果后续需要用到分类的其他关联属性，可通过对象键值对的方式去重：

computed: {
  uniquePurchaseTypes() {
    const filtered = this.categories.filter(item => item.clientId == this.clientId);
    const uniqueMap = {};
    filtered.forEach(item => {
      // 以purchaseType为键，只保留第一个出现的完整对象
      if (!uniqueMap[item.purchaseType]) {
        uniqueMap[item.purchaseType] = item;
      }
    });
    // 将对象的值转为数组返回
    return Object.values(uniqueMap);
  },
}

内容的提问来源于stack exchange，提问作者16_018_RHR