Vue JS - Hide or remove duplicates in child component field

user13928344 0
Viewed 33

I have a child component and it has one field which pulls in repeating data from an Axios request.

Displays Name: blue, blue, red, orange, green, green, blue

Child

 <div v-if="color">
                <strong> Color:</strong> {{ color }}
              </div>

data: function () {
    return {
      color: this.result.color
}

Parent

<Result
              v-for="(result, index) in Results"
              :result="result"                      
             
            />

JSON

"result": [
"results": {
"color": "Blue, Green, Red", 
},
"results": {
"color": "Blue", 
},
"results": {
"color": "Red", 
},
"results": {
"color": "Green, Red", 
},
.....

How can I remove the duplicates? I have tried using a method/computed but I could get it to work. I tried a computed prop on the parent and passing it but it messed up other results on the parent. Would a mutation be better? I want to do this on the child component and not on the parent if possible.

Any help appreciated.

vue.js
1 Answers

In child, You can filtered out the duplicate colors with the help of Set object.

Live Demo :

Vue.component('result', {
  data() {
    return {
        color: null
    }
  },
  props: ['result'],
  mounted() {
    this.color = [...new Set(this.result.color)];
  },
  template: '<p>{{ color }}</p>'
});

var app = new Vue({
  el: '#app',
  data: {
    Results: [{
        color: ['blue', 'blue', 'red', 'orange', 'green', 'green', 'blue']
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <Result v-for="(result, index) in Results" :key="index" :result="result">
  </Result>
</div>

Rohìt Jíndal0
Related