Vue JS - Hide or remove duplicates in child component field-CodePudding

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.

CodePudding user response：

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>