创建卡片组件库时遇"Cannot read properties of undefined (reading 'includes')"错误求解决

第一步：定位报错代码位置 #

优先查看构建日志的报错栈信息，找到触发错误的具体文件和代码行。如果日志中标注了组件名称（比如card-header.vue第X行），直接定位到对应代码段。

第二步：排查常见触发场景 #

结合卡片组件（card-body、card-header、card-footer）的使用逻辑，重点检查以下几个方向：

• Props传递缺失：若子组件（如card-header）定义了接收属性（比如titleClass），但父组件使用时未传入，直接调用titleClass.includes('xxx')会触发错误。解决方式：给对应props设置默认值，示例：

  props: {
    titleClass: {
      type: String,
      default: ''
    }
  }
  

• 模板条件判断漏洞：模板中若写了v-if="someVar.includes('active')"，但someVar可能为undefined。解决方式：先校验变量存在性，修改为v-if="someVar && someVar.includes('active')"
• 计算属性/方法逻辑疏漏：计算属性或方法中处理数据时，未先校验是否为undefined就调用includes。解决方式：添加前置判断，示例：

  computed: {
    isSpecial() {
      return this.someData ? this.someData.includes('special') : false
    }
  }
  

• 插槽内容处理问题：若组件对插槽内容做字符串处理（比如判断类名），插槽未初始化可能导致变量undefined。解决方式：先检查插槽是否存在，再执行includes操作。

第三步：临时调试验证 #

若无法快速定位问题，可在疑似触发错误的代码前添加日志打印，示例：

console.log('当前变量值:', this.targetVar)

重新构建后查看日志，确认变量是否为undefined，再针对性修复。

第四步：检查组件依赖关系 #

若三个组件存在相互引用或数据传递，确认所有传递的数据都设置了初始值或默认值，避免出现undefined的情况。

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