VueJs嵌套道具来自未定义

Question

我正在尝试访问一个数组，它是传递给组件的道具（事件）的一部分，但是在 created() 或mounted() 中，事件道具的数组部分（其余部分很好）作为不明确的。

如下所示，当我检查 vue chrome 插件中的 props 时，registration_fields 就在那里。

我可以在 event 属性中添加一个观察者，并且可以通过这种方式访问​​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>

谢谢

Answer 1

没有观察者它实际上可以正常工作。

new Vue({
  el: '#app',
  data: {
    event: undefined
  },
  components: {
    subC: {
      props: ['event'],

      data() {
        return {
          regFields: []
        }
      },

      created() {
        this.regFields = this.event.registration_fields // Undefined here!
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.event = {
        registration_fields: [1, 3]
      };
    }, 800);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <sub-c v-if="event" :event="event" inline-template>
    <div>
      {{regFields}}
    </div>
  </sub-c>
</div>

如果正如 Belmin Bedak 在下面的评论中所建议的那样，event 是异步填充的，它会以未定义的形式出现，因为它是未定义的。在这种情况下，您需要一个观察者，或者更优雅地使用计算：

new Vue({
  el: '#app',
  data: {
    event: {}
  },
  components: {
    subC: {
      props: ['event'],
      computed: {
        regFields() {
          return this.event.registration_fields;
        }
      }
    }
  },
  // delay proper population
  mounted() {
    setTimeout(() => { this.event = {registration_fields: [1,2,3]}; }, 800);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <sub-c :event="event" inline-template>
    <div>
      {{regFields}}
    </div>
  </sub-c>
</div>