Vue组合式API中多选框过滤Tracks的问题修复请求

问题根源分析 #

1. 流派多选框仅匹配单一流派曲目：原代码用genreFilter.value.includes(track.genre)，逻辑是检查选中的流派数组是否包含曲目完整流派值。如果曲目同时属于多个流派（比如"Rock, Pop"），自然匹配不上。正确逻辑应该是：检查曲目流派是否包含选中的任意一个流派选项。

2. moods/tempo/theme过滤器无响应：这几个字段格式（逗号分隔字符串或数组）和原代码的includes逻辑不匹配，同时HTML部分的多选框可能未正确绑定对应的过滤器数组。

修改后的完整代码 #

Script部分

<script setup>
import { ref, computed } from 'vue'

const searchTerm = ref('')

const genreFilter = ref([])
const moodsFilter = ref([])
const tempoFilter = ref([])
const themeFilter = ref([])

// 辅助函数：检查目标值（字符串/数组）是否包含过滤器中的任意一项
const matchesFilter = (target, filterArray) => {
  // 把目标值转成小写数组（兼容逗号分隔字符串或原生数组）
  const targetItems = typeof target === 'string' 
    ? target.toLowerCase().split(',').map(item => item.trim())
    : target.map(item => item.toLowerCase())
  
  // 检查过滤器中是否有任意一项存在于目标数组
  return filterArray.some(filter => targetItems.includes(filter.toLowerCase()))
}

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 => matchesFilter(track.genre, genreFilter.value))
  }

  // 情绪过滤
  if (moodsFilter.value.length > 0) {
    filtered = filtered.filter(track => matchesFilter(track.moods, moodsFilter.value))
  }

  // 节奏过滤
  if (tempoFilter.value.length > 0) {
    filtered = filtered.filter(track => matchesFilter(track.tempo, tempoFilter.value))
  }

  // 主题过滤
  if (themeFilter.value.length > 0) {
    filtered = filtered.filter(track => matchesFilter(track.theme, themeFilter.value))
  }

  return filtered;
});
</script>

HTML部分（补充完整过滤器示例）

<div class="filters-container flex">
  <!-- 流派过滤器 -->
  <div class="genres w-1/4">
    <h1 class="font-bold text-[#aeaeae]">Genres</h1><br>
    <input class="css-checkbox" type="checkbox" id="Rock" value="Rock" v-model="genreFilter">
    <label class="css-label pl-2 text-s font-light text-[#aeaeae]" for="Rock">Rock</label> 

    <input class="css-checkbox" type="checkbox" id="Pop" value="Pop" v-model="genreFilter">
    <label class="css-label pl-2 text-s font-light text-[#aeaeae]" for="Pop">Pop</label> 
  </div>

  <!-- 情绪过滤器 -->
  <div class="moods w-1/4">
    <h1 class="font-bold text-[#aeaeae]">Moods</h1><br>
    <input class="css-checkbox" type="checkbox" id="Happy" value="Happy" v-model="moodsFilter">
    <label class="css-label pl-2 text-s font-light text-[#aeaeae]" for="Happy">Happy</label> 

    <input class="css-checkbox" type="checkbox" id="Calm" value="Calm" v-model="moodsFilter">
    <label class="css-label pl-2 text-s font-light text-[#aeaeae]" for="Calm">Calm</label> 
  </div>

  <!-- 节奏过滤器 -->
  <div class="tempo w-1/4">
    <h1 class="font-bold text-[#aeaeae]">Tempo</h1><br>
    <input class="css-checkbox" type="checkbox" id="Fast" value="Fast" v-model="tempoFilter">
    <label class="css-label pl-2 text-s font-light text-[#aeaeae]" for="Fast">Fast</label> 

    <input class="css-checkbox" type="checkbox" id="Slow" value="Slow" v-model="tempoFilter">
    <label class="css-label pl-2 text-s font-light text-[#aeaeae]" for="Slow">Slow</label> 
  </div>

  <!-- 主题过滤器 -->
  <div class="theme w-1/4">
    <h1 class="font-bold text-[#aeaeae]">Theme</h1><br>
    <input class="css-checkbox" type="checkbox" id="Love" value="Love" v-model="themeFilter">
    <label class="css-label pl-2 text-s font-light text-[#aeaeae]" for="Love">Love</label> 

    <input class="css-checkbox" type="checkbox" id="Adventure" value="Adventure" v-model="themeFilter">
    <label class="css-label pl-2 text-s font-light text-[#aeaeae]" for="Adventure">Adventure</label> 
  </div>
</div>

关键修改说明 #

• 新增matchesFilter辅助函数：统一处理字符串/数组类型的字段，转成小写数组后用some判断是否匹配任意选中项，解决多流派匹配问题。
• 修正所有过滤器逻辑：替换反向includes判断，改用matchesFilter实现正确匹配，修复moods/tempo/theme无响应问题。
• 拷贝原数组：用[...useSong.tracks]避免修改源数据，防止副作用。
• 补充完整HTML示例：确保每个过滤器对应正确的v-model绑定。

内容的提问来源于stack exchange，提问作者jeanpegg