How can I eliminate duplicate data from a v-for loop in Vue.js? I have an array of clients and another array of categories. When filtering the categories based on clientIDs, I noticed that there are duplicates present.
Please choose a client from the options below.
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 class="input-group">
<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 multiple purchase types with identical names but different clientIDs. How can I remove these duplicate values from the list of purchase types?