CODEWITHSUNDEEP
vue.jsvuejs2
etphoneshome
etphoneshome

Reputation: 81

VueJs Nested props coming through undefined

I am trying to access an array which is part of a prop (event) passed into a component, but when in created() or mounted() the array part of the event prop (the rest is fine) comes through as undefined.

As can be seen below, when I inspect the props in the vue chrome plugin, the registration_fields are there.

I can add a watcher to the event prop and can access the registration_fields that way, but this seems very awkward to have to do this to access already passed in data.

This is from the Chrome vue inspector:

event:Object
  address1_field:"Some Address 1"
  address2_field:"Some Address 2"
  approved:true
  registration_fields:Array[1]

This is what part of my vue file looks like:

  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
        });
      }
    }
 }

I am using Vue 2.4.4

This is how the component is called:

<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>

Thank you

Upvotes: 0

Views: 1685

Answers (1)

Roy J
Roy J

Reputation: 43899

It actually works fine without the watcher.

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>

If, as Belmin Bedak suggests in the comment below, event is populated asynchronously, it comes in as undefined because it's undefined. In that case, you need a watcher, or, somewhat more elegantly, use a computed:

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>

Upvotes: 2

Related Questions