I have this array of objects working fine obtained from an API in mounted in Vue.
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: (...) I have this <select> that I want to fill with the genre seen in the previous array, but without repetitions.
<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> The way I did in HTML prints every genre with repetitions, so my idea was to filter the original array to obtain a new one with only the three genres present once. The problem is the original array populates itself after the filter, I've seen its console.log after the filter one, so I did this way to prevent this thing.
if (this.cds.length == 10) { const genres = this.cds.filter((element) => { return element.genre != element.genre; } So it starts to filter only when the original array contains 10 elements. Outside of my if statement I've written:
this.genreArray = [...genres]; console.log('Genere', this.genreArray); To obtain the genre of the element only when it's different and then I would have saved const genres inside an empty array in data, that is genreArray, to obtain the new array with the genres repeated once. Where have I been wrong?
