CODEWITHSUNDEEP
vue.js
user762579
user762579

Reputation:

Vue.js parent-child components , why my prop is not yet available in child component?

In a parent component Member.vue , I get the user and account data from Vuex store via getters 

<script>
import { mapGetters } from 'vuex'
import Profile from '@/components/Member/Profile.vue'
export default {
  name: 'member',
  components: {
    Profile
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['user', 'account'])
  },
  methods: {
  },
  created () {
    console.log('MEMBER VUE CREATED user: ', this.user)
    console.log('MEMBER VUE CREATED account: ', this.account)
  }
}
</script>

In the child component profile , I get the user data from props, but it's undefined ...

<script>
export default {
  name: 'profile',

  props: ['user'],
  computed: {
    ...
  },
  methods: {
    ...
  },
  created: function () {
    console.log('user data from parent component:')
    console.log('user: ', this.user)
  }
}
</script>

I guess it's related to the Parent-Child lifecycle hooks... but I don't see actually how to solve it easily ... thanks for feedback

Upvotes: 0

Views: 51

Answers (1)

zizzo
zizzo

Reputation: 504

In your HTML you need to pass the property down to the children, in your case it would be something like:

<profile :user="user" ...></profile>

Upvotes: 1

Related Questions