Question

我正在尝试访问一个数组，该数组是传递给组件的prop（事件）的一部分，但是当在created（）或mounted（）中时，事件prop的数组部分（其余的很好）来自as未定义。

如下所示，当我检查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>

谢谢

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>

VueJs嵌套道具未定义

1 个答案: