在VUE2[重复]中，从API获得的对象数组中不重复地提取elelment的属性

Question

我从VUE中的挂载中的API获得了这个可以正常工作的对象数组。

0:
author: (...)
genre: ("Rock")
poster: (...)
title: (...)
year: (...)

1:
author: (...)
genre: ("Pop")
poster: (...)
title: (...)
year: (...)

2:
author: (...)
genre: ("Jazz")
poster: (...)
title: (...)
year: (...)


3:
author: (...)
genre: ("Rock")
poster: (...)
title: (...)
year: (...)

4:
author: (...)
genre: ("Pop")
poster: (...)
title: (...)
year: (...)

5:
author: (...)
genre: ("Jazz")
poster: (...)
title: (...)
year: (...)


6:
author: (...)
genre: ("Rock")
poster: (...)
title: (...)
year: (...)

7:
author: (...)
genre: ("Pop")
poster: (...)
title: (...)
year: (...)

8:
author: (...)
genre: ("Jazz")
poster: (...)
title: (...)
year: (...)

9:
author: (...)
genre: ("Jazz")
poster: (...)
title: (...)
year: (...)

<div class="select-genre">
                <label for="genre">Genre</label>
                <select id="genre" name="genre">
                    <option value="">Seleziona</option>
                    <option v-for="(element, index) in cds" :value="cds.genre">{{ element.genre }}</option>
                </select>
            </div>

if (this.cds.length == 10) {
    const genres = this.cds.filter((element) => {
    return element.genre != element.genre;
}

this.genreArray = [...genres];
console.log('Genere', this.genreArray);

Answer 1

您的筛选函数不正确。element.genre！=element.genre条件始终为false，因为它每次都将相同的元素与其自身进行比较。

您可以这样做：

js prettyprint-override">if (this.cds.length == 10) {
    const genres = {};
    this.cds.forEach((element) => {
       if(!genres[element.genre]) {
          genres[element.genre] = element;
       }
    });
}
this.genreArray = Object.values(genres);