NuxtJs（VueJs框架）中toLowerCase与localeCompare报错求助

你的问题核心是部分门店数据缺少store_name字段（或字段值为undefined/null），导致调用字符串方法时抛出错误。分类页面正常是因为分类数据的名称字段都完整存在，而门店页面的数据集里混入了不完整的条目。下面是具体的排查和修复方案：

1. 先确认数据根源 #

首先调用你的门店API接口（process.env.apiURL + "stores"），检查返回的数组中是否有元素的store_name字段缺失，或者值为null/undefined。这是报错的根本原因——当你尝试对undefined调用toLowerCase()或localeCompare()时，JS就会抛出这类“Cannot read property of undefined”错误。

2. 修改代码添加空值防护 #

修复搜索过滤逻辑（computed属性） #

在AllStores计算属性中，先过滤掉没有有效store_name的门店，再执行搜索匹配：

computed: {
  AllStores: function() {
    return this.stores
      // 先过滤掉store_name不存在/为空的条目
      .filter(store => store?.store_name)
      // 执行搜索过滤（给search加空值防护，避免极端情况报错）
      .filter(store => {
        const searchStr = this.search?.toLowerCase() || '';
        return store.store_name.toLowerCase().includes(searchStr);
      })
      // 按字母排序时也加防护，确保排序逻辑稳定
      .sort((a, b) => {
        const nameA = a.store_name.toLowerCase();
        const nameB = b.store_name.toLowerCase();
        return nameA.localeCompare(nameB);
      })
  }
}

这里用了可选链操作符?.，如果store或this.search是undefined，会直接返回undefined，避免后续方法调用报错。

修复模板渲染 #

在模板中渲染门店名称时，添加默认值，防止出现空白或潜在报错：

<v-card-text class="blue">{{ store.store_name || 'Unnamed Store' }}</v-card-text>

优化filterStore方法 #

给API请求加错误处理，同时确保返回的filterStores始终是数组：

methods: {
  filterStore(n) {
    if (!n) return; // 防止空值触发无效请求
    this.tab = n;
    axios.get(`${process.env.apiURL}stores?filter[where][store_name][regexp]=^\\b${n}/i`)
      .then(res => {
        this.filterStores = res.data || []; // 确保是数组，避免后续v-for报错
      })
      .catch(err => {
        console.error('获取筛选门店失败:', err);
        this.filterStores = []; // 请求失败时重置为空数组
      });
  }
}

3. 为什么之前正常后来报错？ #

很可能是你复制功能到分类页面后，门店数据发生了变化——比如新增了一条没有填写store_name的门店，或者API返回的数据结构出现了异常，导致某个门店对象的store_name变为undefined。之前的数据都是完整的，所以没有触发错误。

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