Vue标签筛选按钮点击无响应问题求助

问题根源 #

标签筛选功能失效由以下代码错误导致：

• 单选框v-model绑定变量不匹配：模板中用了tag，但data定义的变量是tagFilter
• 所有标签共用同一个单选框ID和关联label：点击标签无法正确传递选中的标签值
• 标签筛选逻辑错误：回调函数返回数组而非布尔值，且未判断标签是否匹配选中值

分步修复 #

1. 修正模板中的标签单选框结构

每个标签对应独立单选框，绑定正确v-model与唯一ID，同时对标签去重避免重复按钮：

<div id="below-nav">
  <div id="filter-and-sort-area">
    <div><b>Filter by:</b></div>
    <div class="line-break"></div>
    <div id="filter-and-sort-button-wrapper">
      <div class="filter-radio-toolbar">
        <!-- Favorite Filter -->
        <input type="radio" id="radio1" v-model="favoriteFilter" value="All" checked>
        <label for="radio1">Show All</label>
        <input type="radio" id="radio2" v-model="favoriteFilter" value="true">
        <label for="radio2">Favorites</label>
        <!-- Tag Filters -->
        <input type="radio" id="tag-all" v-model="tagFilter" value="All">
        <label for="tag-all">All Tags</label>
        <template v-for="(tag, index) in uniqueTags" :key="index">
          <input type="radio" :id="`tag-${index}`" v-model="tagFilter" :value="tag">
          <label :for="`tag-${index}`">{{ tag }}</label>
        </template>
      </div> 
    </div>
  </div>
</div>

2. 补充标签去重计算属性与修正筛选逻辑

在computed中添加uniqueTags去重标签，同时修复filter回调必须返回布尔值的问题：

computed: {
  uniqueTags() {
    // 提取非空标签并去重
    const tags = this.cocktails.map(c => c.tag).filter(tag => tag !== null);
    return [...new Set(tags)];
  },
  filteredCocktails() {
    return this.cocktails
      // 搜索筛选
      .filter(cocktail => {
        const searchLower = this.search.toLowerCase();
        return cocktail.ingredient?.toLowerCase().includes(searchLower) || 
               cocktail.cocktail_name.toLowerCase().includes(searchLower);
      })
      // 收藏筛选
      .filter(cocktail => {
        if (this.favoriteFilter === "All") return true;
        return cocktail.favorite === true;
      })
      // 标签筛选
      .filter(cocktail => {
        if (this.tagFilter === "All") return true;
        return cocktail.tag === this.tagFilter;
      });
  }
}

3. 确保data初始值一致性

保持tagFilter初始值与新增选项匹配：

data: function () {
  return {
    cocktails: [],
    search: "",
    activeFilterAndSortButton: "",
    favoriteFilter: "All",
    tagFilter: "All",
  };
}

关键说明 #

• 每个标签单选框必须有唯一ID，label的for属性需对应，才能正确触发选中状态
• filter回调必须返回布尔值，之前返回数组的写法会直接导致筛选逻辑失效
• 新增"All Tags"选项，让标签筛选的交互逻辑与收藏筛选保持统一

内容的提问来源于stack exchange，提问作者prometheusAND-ORbob