[Vue warn]
Error in render: "TypeError: Cannot read property 'abort_msg' of undefined"
found in
---> <Index> at src/views/reply/index.vue
<AppMain> at src/layout/components/AppMain.vue
<Layout> at src/layout/index.vue
<App> at src/App.vue
<Root>
ypeError:
Cannot read property 'abort_msg' of undefined
at Proxy.render (index.vue?7e75:626)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081)
at Watcher.get (vue.runtime.esm.js?2b0e:4495)
at Watcher.run (vue.runtime.esm.js?2b0e:4570)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4326)
at Array.eval (vue.runtime.esm.js?2b0e:1989)
at flushCallbacks (vue.runtime.esm.js?2b0e:1915)
这类报错是由于新传入的数据是深层嵌套的复杂数据类型,初次DOM也并未渲染,所以报错,此错误会影响数据的下次渲染状态,出现此报错就必须修改.
解决方案1(完美方案)
//在data里就把数据结构提前定义好,这样就不会出现此类报错
drawerObj: {
answer: {},
question: {
review: {
abort_msg: ''
}
}
}
在定义里给if判断
<div v-if="tabActive === '2'&&drawerObj.question.review&&drawerObj.question.review.abort_msg" class="abortInfo">
{{ drawerObj.question.review.abort_msg }}
</div>
如此也能解决,但是代码会过于拢杂,并且该数据在其他地方引用时也需要再次写此判断,这个就相当于给漏水的管子最末头上了皮栓,而不是从源头就处理水流的问题,所以并不推荐