Vue js props value comes undefined

Question

I may be wrong in my understanding of props but I can't seem to be able to pass a prop to a component and retrieve its value since it always comes as undefined.

Route:

{
  path: '/account/:username',
  name: 'acccount',
  component: Account
},

Router-link to the component:

<router-link class="btn btn-warning margin-bottom-20" :to="{ name: 'acccount', params: {username: user.username}}">Edit</router-link>

Component:

export default {
  name: 'account',

  props: ['username'],

  computed: {
    user() {
      return this.$store.getters.getUser(this.username);
    }
  }
}

My /accounts view succefully changes to /account/{username} but once on the component the value this.username returns nothing but undefined.

Andre Sardo Andre Sardo · Accepted Answer · 2017-03-12T22:33:46

Update your route:

{
  path: '/account/:username',
  name: 'acccount',
  component: Account
}

To:

{
  path: '/account/:username',
  name: 'acccount',
  component: Account,
  props: true
}

Vue js props value comes undefined

1 Answers