我试图访问一个数组,它是传递给组件的prop(事件)的一部分,但是当在created()或mounted()中时,事件prop的数组部分(其余的很好)来自未定义 .
如下所示,当我检查vue chrome插件中的props时,registration_fields就在那里 .
我可以在事件道具中添加一个观察者,并且可以通过这种方式访问registration_fields,但是这样做以访问已经传入的数据似乎非常尴尬 .
这是来自Chrome vue检查员:
event:Object
address1_field:"Some Address 1"
address2_field:"Some Address 2"
approved:true
registration_fields:Array[1]
这是我的vue文件的一部分:
export default {
props: ['event'],
data() {
return {
regFields: []
}
},
created() {
this.regFields = this.event.registration_fields // Undefined here!
},
watch: {
event() {
this.regFields = this.event.registration_fields //Can access it here
});
}
}
}
我正在使用Vue 2.4.4
这是组件的调用方式:
<template>
<tickets v-if="event" :event="event"></tickets>
</template>
<script>
import tickets from './main_booking/tickets.vue'
export default {
created() {
var self = this;
this.$http.get('events/123').then(response => {
self.event = response.data
}).catch(e => {
alert('Error here!');
})
},
data: function () {
return {event: {}}
},
components: {
tickets: tickets
}
}
</script>
谢谢
1 回答
没有观察者,它实际上工作正常 .
如果正如Belmin Bedak在下面的评论中所建议的那样,
event
是异步填充的,那么它是未定义的,因为它是未定义的 . 在这种情况下,你需要一个观察者,或者更优雅地使用一个计算器: