Vue.js调用Symfony API报错Cannot find module './undefined'求助

错误原因 #

出现Cannot find module './undefined'的核心原因是模板中存在基于cards数组内对象属性的动态资源引用（比如图片、组件），两种场景会导致引用路径变成./undefined：

• API请求未完成时，cards处于初始状态（可能是undefined或空数组），模板提前尝试访问对象属性，得到undefined并拼接到路径中；
• API返回的response.data['hydra:member'][0]里，你用来拼接路径的属性值本身就是undefined。

直接用静态数组时，数据同步存在，不会出现属性未定义的情况，因此没有报错。

解决方法 #

1. 给cards设置安全初始值 #

在组件data里初始化cards，避免它处于undefined状态：

data() {
  return {
    cards: [] // 也可以给一个带默认属性的占位对象：[{ image: 'default.png' }]
  }
}

2. 模板添加条件渲染 #

在依赖cards内对象属性的渲染区域，用v-if判断数据存在后再渲染：

<template>
  <div v-if="cards.length > 0">
    <!-- 示例：渲染依赖cards[0]属性的图片 -->
    <img :src="`./${cards[0].image}`" alt="Product">
  </div>
  <div v-else>加载中...</div>
</template>

3. 对API返回数据做兜底处理 #

赋值时检查关键属性，给undefined的属性设置默认值：

beforeMount() {
  axios.get('/products')
  .then((response) => {
    const firstItem = response.data['hydra:member'][0] || {}
    // 给需要拼接路径的属性（比如image）设置兜底值
    this.cards = [{
      ...firstItem,
      image: firstItem.image || 'default.png'
    }]
  })
  .catch((error) => {
    console.log(error);
  })
}

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