vue js 2: Access props in mounted function

Question

I have data props in child components. Inside child component on mounted function I need to get specific value from props and set select dropdown value. I am using vue-multiselect plugin which is working fine. Here is the code.

module.exports = {
    props: ["Subscriptions"]
    mounted: function () {
        let vm = this;      


        Vue.nextTick(function () {      
        // I want to access props here but it return 0 length array 
            console.log(vm.$parent.Subscriptions);
        });
    },  
    beforeUpdate() {
        let vm = this;
        console.log(vm.$parent.Subscriptions);
    },
//  updated() {
//      let vm = this;
//      console.log(vm.$parent.Subscriptions);
//  }
};

Now only time I do get subscriptions is in beforeUpdate and updated function but this called each time there is a change in value which is not required. I only need to change it first time in order to set drop down initial value.

Answer 1

A common mistake could be, parent component pass a variable as a prop which is null at the moment where child component get rendered. Thus when you access it in mounted in child component. You see it as a null value. And at a later time, in Parent component the variable which was passed (prop) will be assign the values from an asynchronous operation. To avoid possible pitfalls, better to use v-if.

Example :

<ChildComponent :data="testData" />

instead of above below can be used

<ChildComponent v-if="testData" :data="testData" />

so that only when testData available child component will be rendered. But if in child component you have some more things to show until data comes in better to use another component. And adding watchers will also resolve the problem but not in a pretty way.

Since you get values in updated hook probably this could be the case.

Answer 2

Why are you trying to access current component props through '$parent'?

It should work like this:

 module.exports = {
  props: ["Subscriptions"],
  mounted: function () {
      let vm = this;

      Vue.nextTick(function () {
        console.log(vm.Subscriptions);
      });
  },  
  beforeUpdate() {
    console.log(this.Subscriptions);
  },
  updated() {
    console.log(this.Subscriptions);
  }
};

Update:

Anyway, I don't know if you need next tick, try to use created function and without nextTick.

created() {
  alert(this.Subscriptions);
},

Answer 3

I resolved a similar issue using @watch. Maybe this could work?

module.exports = {
  props: ["Subscriptions"]

  // this mounted is probably not necessary
  mounted: function () {
    getSubscriptions(this.Subscriptions)
  },  

  watch: {
    Subscriptions: [{
      handler: 'getSubscriptions'
    }]
  },

  methods: {
    getSubscriptions(el) {
      console.log(el);
    }
  }
};

Answer 4

Receive data from props:

module.exports = {
    props: ["Subscriptions"]
    mounted: function () {
        let vm = this;      

        vm.$nextTick(function () {      
           console.log(vm.Subscriptions);
        });
    },