I want to remove the duplicate datas from v-for loop in vue js. I have some clients in an array and some categories in another array. I am filtering the categories based on clientId's but it's showing the duplicate values also-

Please select any client from the below snippet.

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: {
    filteredPurchase() {
      return this.categories.filter(
        (client) => client.clientId == this.clientId
      );
    },
  }
});

<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 >
        <select multiple>
          <option value="" selected>select purchase Type</option>
          <option v-for="purchase in filteredPurchase" :key="purchase.id" :value="purchase.purchaseType">{{purchase.purchaseType}}</option>
        </select>
      </div>
    </div>
  </div>

</div>

there are many purchase type with the same name with differentt clientId. I want to delete the duplicate values from the purchase Types.

CodePudding user response：

You can create computed property and remove duplicates:

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: {
    unique() {
      return [...new Map(this.categories.map(v => [JSON.stringify(v), v])).values()]
    },
    filteredPurchase() {
      return this.unique.filter(
        (client) => client.clientId == this.clientId
      );
    },
  }
});

<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 >
        <select multiple>
          <option value="" selected>select purchase Type</option>
          <option v-for="purchase in filteredPurchase" :key="purchase.id" :value="purchase.purchaseType">{{purchase.purchaseType}}</option>
        </select>
      </div>
    </div>
  </div>

</div>

CodePudding user response：

This is more of a JS-related issue.

You can use the Set constructor which let us create sets, which are data structures that don’t have duplicate items.

Here I fixed it in this way-

1. I used the Set operator with JSON.stringify to create a set of stringified objects.
2. Convert the set back to the array using the spread(...) operator
3. Convert the array of strings back to the array of objects using JSON.parse.

And, the same purchaseTypes with the same clientId will be removed. See the demo-

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: {
    filteredPurchase() {
      let categories = this.categories.filter(
        (client) => client.clientId == this.clientId
      );
      return [...new Set(categories.map(a => JSON.stringify(a)))].map(a => JSON.parse(a))
    },
  }
});

<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 >
        <select multiple>
          <option value="" selected>select purchase Type</option>
          <option v-for="purchase in filteredPurchase" :key="purchase.id" :value="purchase.purchaseType">{{purchase.purchaseType}}</option>
        </select>
      </div>
    </div>
  </div>

</div>