Vue.js新手求教：如何添加数字类型店铺ID筛选功能

嘿，你已经搞定了店铺名称的筛选功能，现在要扩展支持按数字ID筛选对吧？其实改动不大，咱们一步步来调整代码：

核心思路 #

原来的筛选只检查了店铺名称（desc_store），现在需要**同时满足「名称匹配」或「ID匹配」**的任意一项即可。这里要注意：id_store是数字类型，而搜索框的输入是字符串，所以得先处理类型转换的问题，避免匹配失败。

我给你两种常用的筛选方案，你可以根据需求选择：

方案1：支持部分匹配ID（比如输入"2"会匹配ID=2、ID=122等包含"2"的店铺） #

这种方案适合用户可能输入ID的一部分来查找的场景，修改filteredTiendas计算属性即可：

computed: { 
  filteredTiendas: function() { 
    // 搜索框为空时直接返回所有店铺，逻辑更清晰
    if (!this.search) return Object.values(this.items);
    return Object.values(this.items).filter(item => { 
      // 把数字ID转成字符串，方便和搜索词匹配
      const idAsString = item.id_store.toString();
      // 店铺名称匹配 或者 ID字符串包含搜索词
      return item.desc_store.includes(this.search) || idAsString.includes(this.search); 
    }); 
  }, 
  searchUp: { 
    get() { return this.search.toLowerCase(); }, 
    set(search) { this.search = search.toUpperCase(); } 
  } 
};

方案2：支持严格匹配ID（只有输入完整的ID数字才会匹配，比如输入"2"只匹配ID=2的店铺） #

如果希望用户必须输入完整的ID才能找到对应店铺，就用这个方案：

computed: { 
  filteredTiendas: function() { 
    if (!this.search) return Object.values(this.items);
    // 尝试把搜索词转换为数字
    const searchId = parseInt(this.search);
    return Object.values(this.items).filter(item => { 
      // 名称匹配，或者（搜索词是有效数字且等于店铺ID）
      return item.desc_store.includes(this.search) || (!isNaN(searchId) && item.id_store === searchId); 
    }); 
  }, 
  searchUp: { 
    get() { return this.search.toLowerCase(); }, 
    set(search) { this.search = search.toUpperCase(); } 
  } 
};

为什么这么改？ #

1. 空搜索处理：加了if (!this.search)的判断，当搜索框为空时直接返回所有店铺，比原来的match空字符串逻辑更直观，也避免了不必要的过滤运算。
2. 类型转换：把数字ID转成字符串（方案1），或者把搜索词转成数字（方案2），解决了数字和字符串类型不匹配导致的匹配失败问题。
3. 逻辑或（||）：只要满足名称匹配或ID匹配其中一项，就会保留该店铺，实现了同时支持两种筛选方式的需求。

额外说明 #

你的HTML模板完全不需要改动！用户在输入框里既可以输入店铺名称，也可以输入ID数字，searchUp的双向绑定会自动处理大小写转换，筛选逻辑会自动生效。

内容的提问来源于stack exchange，提问作者JesúsDel