Vue父组件传JSON数组到子组件后无法访问属性的问题

我来帮你排查下问题所在，其实这里有几个明显的小错误导致了报错，咱们一步步拆解修复：

首先看你的报错信息：

[Vue warn]: Error in render: "TypeError: Cannot read property 'english' of undefined"

这个报错的核心是：你尝试访问一个undefined对象的english属性，咱们来逐个解决问题：

问题1：子组件错误引用Props #

你在子组件的data选项里直接写obj: propsdata，这是不符合Vue语法的——在组件选项中访问props必须通过this关键字。而且其实完全没必要把props赋值到data里，因为props本身就是响应式的，直接使用props会更高效。

问题2：字段名不匹配 #

父组件传递的数组中，英文对应的键是e，但子组件模板里写的是obj[0].english，这个字段根本不存在，自然会触发报错。

问题3：缺少空值判断 #

即使前面的问题都修复了，Vue初始化过程中可能存在props还未完全传递的情况，直接访问propsdata[0]会得到undefined，进而访问属性就会报错。

修改后的子组件代码 #

Script部分

<script>
export default {
  props: ['propsdata'],
  data() {
    return {
      // 如果确实需要把props存到data中，要通过this访问：
      // obj: this.propsdata
    }
  }
}
</script>

Template部分

直接使用props，同时加上空值判断、修正字段名：

<template>
  <div>
    sub
    <!-- 先判断数组存在且有数据，再访问内部属性 -->
    <p v-if="propsdata && propsdata.length > 0">{{ propsdata[0].e }}</p>
  </div>
</template>

额外优化建议 #

1. Props命名规范：Vue推荐props使用小驼峰命名，比如把propsdata改成propsData，父组件绑定的时候可以用短横线分隔（<sub1 v-bind:props-data="voca"></sub1>），更符合Vue编码规范。
2. Props类型校验：可以给props加上类型校验，确保传递的数据格式正确，还能设置默认值避免空数据报错：

props: {
  propsData: {
    type: Array,
    required: true,
    default: () => []
  }
}

这样修改后，你就能正常访问父组件传递过来的数组数据啦！

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