组件API重新编码?

Question

如何使用Vue 3为组合API编写这个?

checkboxFilter:{genre: [], moods: [], tempo: [], theme: []},

computed: {
filteredSongs: function(value, key){
let fltrdSongs = this.songs;
if(this.checkboxFilter.genre.length + this.checkboxFilter.moods.length + this.checkboxFilter.tempo.length + this.checkboxFilter.theme.length > 0) {
// checking if "genre" array has elements
if (this.checkboxFilter.genre.length > 0) {
fltrdSongs = this.songs.filter((song) => {
let length = this.checkboxFilter.genre.length;
while(length--){
if ((song.genre).indexOf(this.checkboxFilter.genre[length])!=-1) {
return true;
}
}
});
}
if(this.checkboxFilter.moods.length > 0) {
fltrdSongs = fltrdSongs.filter((song) => {
let length = this.checkboxFilter.moods.length;
while(length--){
if ((song.moods).indexOf(this.checkboxFilter.moods[length])!=-1) {
return true;
}
}
});
}
if(this.checkboxFilter.tempo.length > 0) {
fltrdSongs = fltrdSongs.filter((song) => {
let length = this.checkboxFilter.tempo.length;
while(length--){
if ((song.tempo).indexOf(this.checkboxFilter.tempo[length])!=-1) {
return true;
}
}
});
}
if(this.checkboxFilter.theme.length > 0) {
fltrdSongs = fltrdSongs.filter((song) => {
let length = this.checkboxFilter.theme.length;
while(length--){
if ((song.theme).indexOf(this.checkboxFilter.theme[length])!=-1) {
return true;
}
}
});
}
}
return fltrdSongs.filter((song) => {
return song.keywords.toLowerCase().match(this.search.toLowerCase()) ||
song.title.toLowerCase().match(this.search.toLowerCase()) ||
song.description.toLowerCase().match(this.search.toLowerCase())
});
},

我试图改变我的网站的组成api格式，但我似乎不能得到复选框过滤，因为我想要的。我已经尝试重写了这个，但我一直存在的问题是，每个类型，情绪，主题和节奏只会返回歌曲数组中各自部分的第一个字符串。我想要的是选择一个类型复选框，并让所有曲目返回该类型，即使它在类型列表中排名第三。目前它只会返回第一个。这里是我到达的地方:

const searchTerm = ref('')
const genreFilter = ref([])
const moodsFilter = ref([])
const tempoFilter = ref([])
const themeFilter = ref([])
const filteredTracks = computed(() => {
let filtered = useSong.tracks;
if (searchTerm.value) {
const term = searchTerm.value.toLowerCase();
filtered = filtered.filter(track =>
track.description.toLowerCase().includes(term) || 
track.genre.toLowerCase().includes(term) ||
track.keywords.toLowerCase().includes(term) ||
track.moods.toLowerCase().includes(term)
);
}
if (genreFilter.value.length > 0) {
filtered = filtered.filter(track => genreFilter.value.includes(track.genre))
}
if (moodsFilter.value.length > 0) {
filtered = filtered.filter(track => moodsFilter.value.includes(track.moods))
}
if (tempoFilter.value.length > 0) {
filtered = filtered.filter(track => tempoFilter.value.includes(track.tempo))
}
if (themeFilter.value.length > 0) {
filtered = filtered.filter(track => themeFilter.value.includes(track.theme))
}
return filtered;
});

提前感谢。

下面是大部分代码的链接:页面/组件的SFC

Answer 1

过滤器不成功，因为track。Genre是一个逗号分隔的多个类型字符串。假设你选择的过滤器是"摇滚";和";Pop"你的歌曲有"流行"、"摇滚"的风格。然后你的过滤器尝试做:

["Rock", "Pop"].includes("Pop, Rock") // no match found

过滤器只会在genreFilter包含被测试的整个字符串时产生匹配，例如

["Rock", "Pop", "Pop, Rock"].includes("Pop, Rock") // 1 match found

处理此问题的一个可能策略是使用string .split()将字符串"Pop, Rock"转换为字符串数组，然后根据genreFilter数组中的每个值测试该数组中的每个值。使用Array.some()可以这样做:

if (genreFilter.value.length > 0) {
const trackGenres = track.genre.split(', ');
filtered = filtered.filter(track =>
genreFilter.value.some(g => trackGenres.includes(g))
);
}

需要注意的一个陷阱是，每个具有多个类型的轨道需要用逗号空格", "精确分隔。如果JSON缺少逗号之间的空格，或者一个类型的名称中有逗号，你将得到一个糟糕的结果，你需要重新考虑如何分割和/或考虑特殊情况。