CODEWITHSUNDEEP
vue.jsvue-router
raklos
raklos

Reputation: 28545

Passing router value as prop

I'm passing the data as

route

{
    path: '/name/:nameSlug',
    name: 'NameItem',
    props: true,
    components: { home: Name }
},

router link to component

<router-link :to="{ name: 'NameItem', params: { nameSlug: name.nameSlug } }">
  {{ name.english }} 
</router-link>
 // name object
{
  "id": 1303,
  "english": "bob",
  "gender": "M",
  "nameSlug": "bob"
}

NameItem props

props: {
    nameSlug: {
        type: String,
        required: true
    }
},

I'm getting the following error for this page, what is the issue? using "vue-router": "^3.2.0":

TypeError: Cannot read property 'nameSlug' of undefined

or this, note the url does change correctly

[Vue warn]: Missing required prop: "nameSlug"

enter image description here

Upvotes: 0

Views: 216

Answers (1)

Phil
Phil

Reputation: 164871

See this note in the documentation...

for routes with named views, you have to define the props option for each named view

Your route uses the named view "home" so you will need something like the following

{
  path: '/name/:nameSlug',
  name: 'NameItem',
  props: {
    default: true,
    home: true
  },
  components: { home: Name }
},

Upvotes: 2

Related Questions