vue js 2: Access props in mounted function

user_3667553 0
Viewed 49926

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.

vuejs2 vue-component vue.js
5 Answers

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.

user_32661000

Receive data from props:

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

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

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

I solved a similar problem by not using props at all. I instead fired a method on the child component from the parent component, passing in an argument.

This can be done by setting a ref attribute on the child component element in the parent component's template , then using this.$refs to access the method from any hook or method.

<template>
<child-component ref="name"/>
</template>

<script>
export default{
mounted(){
this.$refs.name.methodName(data);
}
</script>

This can help in various situations - passing data and/or firing a method when something happens, and the reverse can also be done using this.$parent from the child component.

user_111301600
Related