Vue.js 2循环报错：Property or method 'item'未定义求助

问题根源 #

你遇到的警告有两个最可能的原因：

1. 初始渲染时productData.supplierItems不存在
   你的productData初始值是空对象{}，API请求完成前的首次渲染阶段，productData.supplierItems是undefined。Vue无法对undefined执行v-for循环，导致遍历上下文里的item变量无法被正确识别。

2. 子组件未正确接收item数据
   你在父组件的v-for里定义了item，但没把这个item通过props传递给<supplier-item>；或者子组件内部没声明对应的props，却直接在模板里用了item变量。

具体解决办法 #

办法1：初始化时给supplierItems设为空数组 #

修改data的初始值，保证渲染时supplierItems始终是数组类型：

data() {
    return {
        productData: {
            supplierItems: [] // 预先初始化空数组
        },
        hasError: false,
        errorMessage: '',
    };
},

办法2：用可选链避免遍历undefined（Vue3或Vue2配合扩展） #

如果不想改初始值，可通过可选链操作符确保遍历的是有效数组：

<supplier-item v-for="item in productData?.supplierItems" :key="item?.id"></supplier-item>

注：Vue2原生不支持可选链，需安装@vue/composition-api或升级到Vue3

办法3：确保子组件正确接收并使用数据 #

• 父组件必须把item传递给子组件：

<supplier-item v-for="item in productData.supplierItems" :key="item.id" :supplier-item="item"></supplier-item>

• 子组件中声明对应的props：

// supplier-item组件代码
export default {
    props: {
        supplierItem: {
            type: Object,
            required: true
        }
    }
}

之后子组件模板里要使用supplierItem（不是item）来渲染内容。

额外验证技巧 #

可以在父组件里先判断数组是否存在再渲染循环，避免无效遍历：

<template v-if="productData.supplierItems">
    <supplier-item v-for="item in productData.supplierItems" :key="item.id" :supplier-item="item"></supplier-item>
</template>

内容的提问来源于stack exchange，提问作者Thomas Deutschländer