Vue-router: Missing param when rendering router-link

[rlambertsen]

When trying to recreate another issue I seem to be having I came across a new one that is kind of related to my original problem. I have a code pen ready to view here

The problem I seem to be having is that when I change the prop TO to v-bind:TO to add some params I get an error that says

[Vue warn] Error when rendering component :
[vue-router] missing param for named route "joke": Expected "number" to be defined

Yet when I remove the colon, not binding the TO prop it loads the data. I hope I am getting my point across. Maybe if someone can explain what I am doing wrong here, it might fix my other problem? Thanks!!!

[simplesmiler]

In your data:

data () {
  return {
    joke: [],
  }
},

In your template:

  <router-link :to="{name: 'joke', params: {number: joke.id}}">{{joke.id}}</router-link>

The joke.id being undefined is the reason why you see the error.
What you can do is to enclose router-link into an appropriate v-if, so that it does not try to render until your async data actually arrives.

[rlambertsen]

That actually does not work either I still get the same error. The odd thing is that if you take away the params inside the router-link it renders fine. Please explain why this does this and how to avoid these problems in real apps using vue-router

[simplesmiler]

Demo: http://codepen.io/anon/pen/LbmQrm?editors=1010

[rlambertsen]

Ok awesome, thank you. Can you explain why using a template html element vs a normal div worked?
As I said before I have another problem that sees lots of Vue-warns about the router-link element. The problem I am facing is I am using component files and not script templates. So I am finding it harder to get a codepen to develop the same errors.

[simplesmiler]

This has nothing to do with template, I just used it for convenience.
You can put v-if directly on router-link, or wrap it in a template or any other element.
As I said, errors like this one happens when the template is trying to access the data that does not (yet) exist.

[DiscoveryFEE]

@simplesmiler that CodePen you linked to has an endless loop that keeps reloading the page. ??