Vue中如何从组件Prop获取v-for循环内的对象值？

针对你在Vue中无法通过item.item_type.name从itemTypesData枚举中获取值的问题，按以下步骤排查解决：

1. 核对itemTypesData的结构匹配性 #

确保itemTypesData的键名和item.item_type.name的字符串完全一致（包括大小写、拼写）。结合你提供的itemsArray数据，item_type.name为type1和type2，那么itemTypesData必须是如下正确结构：

// 正确示例
const itemTypesData = {
  type1: { color: 'teal', icon: 'mdi-book' },
  type2: { color: 'orange', icon: 'mdi-pencil' }
}

如果键名写成Type1或type_1这类不匹配格式，必然无法获取对应值。

2. 模板添加容错处理，避免空值报错 #

如果itemsArray是异步加载的，或某个item的item_type字段为null/undefined，直接访问item.item_type.name会抛出错误，导致后续itemTypesData访问失败。给模板添加可选链操作符?.做容错：

<v-sheet v-for="item in itemsArray" :key="item.id" class="d-flex px-md-8 px-sm-0 w-100">
  <v-avatar 
    :color="itemTypesData[item.item_type?.name]?.color" 
    :size="iconHeight"
    class="ma-1 flex-shrink-0"
  >
    <v-icon color="white" size="x-large">
      {{ itemTypesData[item.item_type?.name]?.icon }}
    </v-icon>
  </v-avatar>
</v-sheet>

若使用Vue 2（不支持可选链），用三元表达式替代：

:color="item.item_type ? itemTypesData[item.item_type.name]?.color : 'gray'"

3. 确保itemTypesData为响应式 #

如果itemTypesData是后续异步获取的，需将其标记为Vue响应式数据：

• Vue 3：用reactive或ref包裹

  import { reactive } from 'vue'
  const itemTypesData = reactive({
    type1: { /* 属性内容 */ },
    type2: { /* 属性内容 */ }
  })
  

• Vue 2：将其放入组件的data选项中，或用Vue.observable处理

4. 检查itemsArray的传递与结构 #

确认父组件传递的itemsArray每个元素都包含完整的item_type.name字段，无缺失或拼写错误。

内容的提问来源于stack exchange，提问作者Marc Vila Tornamorell