The value passed by the parent component of vue. A field is always reported to null.

problem description

the value passed from the parent component to the child component. ResumeData, is an object and rendered successfully, but the console always reports that one of the fields is null,

two errors

  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"}!. / nodesigned modulesstop vueMaxime loader.NodemodulesUniverse NodeWheLedloaderMaMaMaMaLoader.jsloader.NodemodulesUnitionNodemodulesAccording to CacheLetLoaderAccording to CacheLetLoaderAccording to "cacheIdentifier": "6319bb7e-vue-loader-template", the modules are leveraged vueMuyloaderlibindex.jsload.SequenceSrcUniviewsAccenterLectureLectureUnientsUnitedTableLedtabLap _ compume.vueuecuecentsAccordittabbycompume.vue : 379 vue.runtime.esm.js?2b0e:4540 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) `

related codes

  • template Code
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"

question:

The fullName field in the

form is rendered. Why is it called null??

Nov.04,2021

if it is because of the console, inside, then when the parent component registers the child component, it registers as an asynchronous component

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

clipboard.png
if the resumeData.fullName in the sub-component reports an error, then directly VMI if = "resumeData.fullName"


1. Focus on what the initial value of resumeData is and when to reassign
2. The process of VUE is to bind props first, initialize data, and then call created, and then the render (render process will create child nodes and child components)
error means that when you create a child node, when you get resumeData.fullName, the value of resumeData.fullName is null

.

3. The core of fixing this bug is the control of the value of the resumedata. If there is no data, it should be {} instead of null


  1. the data is not passed when the sub-component created hook, so the value when printing resumeData in the hook is null .
  2. The
  3. page can be rendered normally. After resumeData is imported into the subcomponents through props , Vue detects that resumeData is worth changing, and then renders. In your code, this happens after created .
  4. about [Vue warn]: Error in render: "TypeError: Cannot read property 'fullName' of null" , when the sub-component does not receive resumeData , the template performs binding resumeData.fullName , and the resuleData value is null,.
  5. it is recommended to add the el-form tag with VMI if = "resumeData" to ensure that the data is worth it and then bind the rendering.
Menu