如何从自定义下拉菜单中移除空字符串选项？

问题根源 #

1. uniqueTags未过滤空字符串：当前计算属性直接把所有cocktail的tag作为键存入对象，空字符串会被当作有效键保留，导致下拉菜单出现空标签选项。
2. 模板嵌套无效：HTML不允许在<option>内嵌套另一个<option>，这种错误结构会让你的v-if过滤逻辑完全失效。

修复步骤 #

1. 修正uniqueTags计算属性

先过滤掉null、空字符串、纯空格的无效标签，再执行去重：

computed: {
  filteredCocktails() {
    return this.cocktails.filter((cocktail) => {
      if (this.tagFilter === "") {
        return true;
      } else {
        return cocktail.tag === this.tagFilter;
      }
    });
  },
  uniqueTags() {
    return this.cocktails
      // 先筛掉无效标签
      .filter(cocktail => {
        const tag = cocktail.tag;
        return tag != null && tag.trim() !== '';
      })
      // 再去重
      .reduce((seed, current) => {
        seed[current.tag] = current;
        return seed;
      }, {});
  },
},

2. 修复下拉菜单模板结构

移除嵌套的<option>，直接遍历过滤后的uniqueTags：

<select v-model="tagFilter">
  <option value="">Select Tag</option>
  <option 
    v-for="(cocktail, tag) in uniqueTags" 
    :key="cocktail.id" 
    :value="tag"
  >
    {{ tag }}
  </option>
</select>
<button id="filter-and-sort-button" v-if="tagFilter !== ''" @click="tagFilter = ''">
  Clear Tag
</button>

3. 可选优化：过滤无效标签的cocktail

如果需要确保筛选结果里不包含空标签的饮品，可以在filteredCocktails里追加判断：

filteredCocktails() {
  return this.cocktails.filter(cocktail => {
    // 可选：未筛选时也排除空标签饮品
    if (cocktail.tag == null || cocktail.tag.trim() === '') {
      return this.tagFilter === '';
    }
    // 原有筛选逻辑
    if (this.tagFilter === "") {
      return true;
    } else {
      return cocktail.tag === this.tagFilter;
    }
  });
},

为什么之前的removeEmptyTags没生效？ #

你写的方法逻辑本身没问题，但没有在uniqueTags的计算流程中调用它，空字符串标签依然会被保留到去重后的对象里。现在的修复直接把过滤逻辑整合到了uniqueTags生成过程中，无需额外方法。

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