Vue组件的道具变成了未定义的

时间:2018-05-31 09:48:28

标签: javascript vuejs2 vue-component

嗨,我有一个奇怪的问题

我有一个带有一些道具的Vue组件。在代码之前,组件只在本地注册并且工作正常,但是由于系统的变化,我还需要在全局注册它,但随后出现了这个奇怪的问题。

组件中的所有道具,无论你传递给它的是什么都是未定义的

父母中的

我使用这样的组件:

<questionnaire
    v-if="questionnaire !== null && questions !== null && informationAssets !==  null"
    :current_status="savestatus"
    :questionnaire="questionnaire" 
    :informationAssets="informationAssets"
    :questions="questions"
    v-on:questionChange="updateQuestion(arguments[0], arguments[1])">
 </questionnaire>

然后在问卷组件i console.log中创建父数据和创建的钩子中的prop:

created() {
        console.log(this.questionnaire, this.questions, this.informationAssets)
        console.log(this.$parent.questionnaire, this.$parent.questions, this.$parent.informationAssets)
}

所以这里有趣的部分。当我们查看console.log时,我得到了

undefined undefined undefined
---------------------------------------------------------------------------
{…} 
(36) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer] 
{__ob__: Observer}

所以当问卷组件加载时,数据会出现在父级中(如预期的那样),但道具仍未定义。

我真的不明白。是否存在本地注册组件并全局注册它的问题,但是名称不同。

当组件尝试加载时,它不会渲染并给出此错误

vue.js:583 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'title' of undefined"
warn @ vue.js:583
logError @ vue.js:1578
globalHandleError @ vue.js:1573
handleError @ vue.js:1562
(anonymous) @ vue.js:1680
flushCallbacks @ vue.js:1599
Promise.then (async)
microTimerFunc @ vue.js:1645
nextTick @ vue.js:1691
queueWatcher @ vue.js:2791
update @ vue.js:2917
notify @ vue.js:681
reactiveSetter @ vue.js:964
proxySetter @ vue.js:3005
(anonymous) @ information-assets-processor.vue?cf9d:347
Promise.then (async)
getData @ information-assets-processor.vue?cf9d:346
created @ information-assets-processor.vue?cf9d:574
callHook @ vue.js:2650
Vue._init @ vue.js:4123
VueComponent @ vue.js:4291
createComponentInstanceForVnode @ vue.js:3842
init @ vue.js:3690
createComponent @ vue.js:5025
createElm @ vue.js:4979
patch @ vue.js:5549
Vue._update @ vue.js:2416
updateComponent @ vue.js:2521
get @ vue.js:2850
run @ vue.js:2927
flushSchedulerQueue @ vue.js:2711
(anonymous) @ vue.js:1678
flushCallbacks @ vue.js:1599
Promise.then (async)
microTimerFunc @ vue.js:1645
nextTick @ vue.js:1691
queueWatcher @ vue.js:2791
update @ vue.js:2917
notify @ vue.js:681
reactiveSetter @ vue.js:964
(anonymous) @ vue-router.esm.js:2353
(anonymous) @ vue-router.esm.js:2352
updateRoute @ vue-router.esm.js:1884
(anonymous) @ vue-router.esm.js:1759
(anonymous) @ vue-router.esm.js:1869
step @ vue-router.esm.js:1604
step @ vue-router.esm.js:1611
runQueue @ vue-router.esm.js:1615
(anonymous) @ vue-router.esm.js:1864
step @ vue-router.esm.js:1604
(anonymous) @ vue-router.esm.js:1608
(anonymous) @ vue-router.esm.js:1847
(anonymous) @ vue-router.esm.js:1679
iterator @ vue-router.esm.js:1832
step @ vue-router.esm.js:1607
step @ vue-router.esm.js:1611
runQueue @ vue-router.esm.js:1615
confirmTransition @ vue-router.esm.js:1855
transitionTo @ vue-router.esm.js:1758
addRoutes @ vue-router.esm.js:2429
addRoutes @ risma.vue?2a44:51
(anonymous) @ index.js:120
i @ jquery-2.2.4.min.js?v=6.5.5:2
fireWith @ jquery-2.2.4.min.js?v=6.5.5:2
ready @ jquery-2.2.4.min.js?v=6.5.5:2
J @ jquery-2.2.4.min.js?v=6.5.5:2

vue.js:1582 TypeError: Cannot read property 'title' of undefined
at o.render (questionnaire.vue?9925:6)
at o.Re.n._render (vue.min.js:6)
at o.<anonymous> (vue.min.js:6)
at Vi.get (vue.min.js:7)
at new Vi (vue.min.js:7)
at o.e._mount (vue.min.js:6)
at o.Be.$mount (vue.min.js:8)
at o.Be.$mount (vue.min.js:8)
at init (vue.js:3691)
at createComponent (vue.js:5025)
logError @ vue.js:1582
globalHandleError @ vue.js:1573
handleError @ vue.js:1562
(anonymous) @ vue.js:1680
flushCallbacks @ vue.js:1599
Promise.then (async)
microTimerFunc @ vue.js:1645
nextTick @ vue.js:1691
queueWatcher @ vue.js:2791
update @ vue.js:2917
notify @ vue.js:681
reactiveSetter @ vue.js:964
proxySetter @ vue.js:3005
(anonymous) @ information-assets-processor.vue?cf9d:347
Promise.then (async)
getData @ information-assets-processor.vue?cf9d:346
created @ information-assets-processor.vue?cf9d:574
callHook @ vue.js:2650
Vue._init @ vue.js:4123
VueComponent @ vue.js:4291
createComponentInstanceForVnode @ vue.js:3842
init @ vue.js:3690
createComponent @ vue.js:5025
createElm @ vue.js:4979
patch @ vue.js:5549
Vue._update @ vue.js:2416
updateComponent @ vue.js:2521
get @ vue.js:2850
run @ vue.js:2927
flushSchedulerQueue @ vue.js:2711
(anonymous) @ vue.js:1678
flushCallbacks @ vue.js:1599
Promise.then (async)
microTimerFunc @ vue.js:1645
nextTick @ vue.js:1691
queueWatcher @ vue.js:2791
update @ vue.js:2917
notify @ vue.js:681
reactiveSetter @ vue.js:964
(anonymous) @ vue-router.esm.js:2353
(anonymous) @ vue-router.esm.js:2352
....

我真的需要一个敏锐的Vue专家,告诉我我做错了什么

0 个答案:

没有答案
相关问题