Vue开发搜索功能时出现toLowerCase相关undefined报错如何解决

toLowerCase 是JavaScript字符串专属的原型方法，当你在非字符串类型（undefined、null、数字、对象等）上调用该方法时，就会触发你遇到的控制台报错，你的场景下有两种可能的触发原因：

• 遍历的itemList中存在异常条目：部分条目没有name属性，或name值为undefined、null、数字等非字符串类型
• inputValue被意外赋值为非字符串类型：虽然初始化时你定义了空字符串，但如果后续业务逻辑里误把其他类型的值赋值给inputValue，也会触发该错误

快速修复（推荐） #

给需要调用toLowerCase的变量加类型兜底，确保调用方法的一定是字符串类型，修改itemVisible方法即可：

itemVisible(item) {
  // 空值兜底后强转字符串，避免非字符串类型调用方法报错
  let currentName = (item?.name ?? '').toString().toLowerCase();
  let currentInput = (this.inputValue ?? '').toString().toLowerCase();
  return currentName.includes(currentInput);
}

上面的代码里：

• 可选链?.用来避免item为undefined时读取name属性报错
• 空值合并运算符??把undefined、null的场景兜底为空字符串
• toString()强制把值转为字符串类型，彻底规避类型异常

进阶优化 #

• 给itemList的数据来源加校验，确保后端/其他模块传入的每一条条目都存在合法的字符串类型name字段，从数据源侧避免异常数据进入渲染流程
• 可给inputValue的赋值逻辑加类型限制，避免非字符串值被写入该变量

内容的提问来源于stack exchange，提问作者Alex.J