vue 父组件传递来的值，一个字段总是报null

Question

问题描述

从父组件传递到子组件的值，resumeData，是一个对象，渲染成功，但是控制台总是报其中的一个字段是null，

两个报错

1. [Vue warn]: Error in render: "TypeError: Cannot read property 'fullName' of null"
2. `vue.runtime.esm.js?2b0e:1737 TypeError: Cannot read property 'fullName' of null
   at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules\.cache\vue-loader","cacheIdentifier":"6319bb7e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/center/lecture/components/edittab-comp/Resume.vue?vue&type=template&id=209dce5a&scoped=true& (0.js:311), <anonymous>:379:41)
   at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:4540)
   at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:2784)
   at Watcher.get (vue.runtime.esm.js?2b0e:3138)
   at new Watcher (vue.runtime.esm.js?2b0e:3127)
   at mountComponent (vue.runtime.esm.js?2b0e:2791)
   at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:7995)
   at init (vue.runtime.esm.js?2b0e:4133)
   at createComponent (vue.runtime.esm.js?2b0e:5604)
   at createElm (vue.runtime.esm.js?2b0e:5551)`

相关代码

• template代码

 <el-form 
    ref="resumeForm" 
    :model="resumeData" 
    :rules="resumeRules" 
    label-width="120px">

      <!-- 姓名 -->
      <el-form-item label="姓名" prop="fullName">
        <el-input v-model="resumeData.fullName" placeholder="请输入真实姓名">
        </el-input>
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="resumeData.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      ……
   </el-form>

• script代码

export default {
  name: "Resume",
  props: {
    resumeData:{
      type:Object,
      default:{}
    }
  },
……
created() {
    this.formInit();
  },
  methods: {
    formInit() {
      console.log(this.resumeData); // 打印结果：null
    },

• resumeData数据结构

resumeEntity: {resumeId: "201811071060145813156925440", openId: "ohu7T06ir-fwh_advr1NEnzCvaps", fullName: "fsdf",…}
authenticationTime: null
company: "fsd"
companyAddress: null
companyLevel: null
companyScore: null
course1: "["关节","美学"]"
course2: "["托槽定位与粘接"]"
createTime: "2018-11-07 20:23:52"
department: "fsdf"
education: null
fullName: "fsdf"
idCard: null
isbu: 1
mail: "fsd"
openId: "ohu7T06ir-fwh_advr1NEnzCvaps"
phone: "fsd "
portrait: "fsdfas "
position: "fsdf"
positionScore: null
proveDesc: null
proveImg: "fds"
resumeId: "201811071060145813156925440"
resumeState: -1
resumeVersion: "v1"
score: null
serviceRanking: null
sex: 1
titleLevel: "fsdf"
titleScore: null
updateTime: "2018-11-07 20:23:52"
wechat: "fsdf"

问题：

表单中fullName字段渲染出来了，为什么说是null？

Answer 1

如果是因为里面的console，那么在父组件注册子组件的时候，采用异步组件的方式注册

components: {
    'keyboard': () => import('../../assets/mmm.vue')
  },

如果是子组件里面的 resumeData.fullName报错，那么直接 v-if="resumeData.fullName"

Answer 2

1、关注resumeData初始值是什么，什么时候重新赋值的
2、VUE的过程是先绑定props、初始化data，然后调用created，之后再render（render过程会创建子节点、子组件）
报错的意思就是，创建子节点时，获取resumeData.fullName时，resumeData值为null

3、修复这个bug的核心是resumeData值的控制。如果没有数据时，应该为{}, 而不是null

Answer 3

1. 在子组件created钩子的时候，数据并没有传过来，所以在钩子里去打印resumeData时值是null。
2. 页面可以正常渲染，是在resumeData通过props传入子组件后，Vue监测到了resumeData值得变化，而后渲染。在你的代码中，这发生在created后。
3. 关于[Vue warn]: Error in render: "TypeError: Cannot read property 'fullName' of null"，是子组件在没收到resumeData时，template中执行绑定resumeData.fullName，resuleData值为null，所以报错。
4. 建议在el-form标签加上v-if="resumeData"，确保数据有值得情况下再绑定渲染。