CODEWITHSUNDEEP
javascriptvue.jsvue-router
greedsin
greedsin

Reputation: 1272

Vue router - missing param for named route

How can I solve this problem.

I have a button which should link me to the view about the object I have created. For example

   <router-link :to="{ name:DetailView,
                       params:{ id: detail.id}
                     }
                @click="createDetail()> Create Detail
   </router-link>

And in my component detail is set after a backend request:

detail:Detail;

createDetail(){
    makeBackendCall().then(detail=>{
        this.detail=detail
    })
}

This is the warning/error I get:

[vue-router] missing param for named route "name:DetailView":
Expected "id" to match "[^\/]+?", but received ""

Obviously the detail component is not yet loaded. Is there something I am missing?

Upvotes: 4

Views: 12729

Answers (2)

Ferrybig
Ferrybig

Reputation: 18834

You should make a normal html button, and then manually redirect the user after you make your backend object (and use css to style the button)

    <button @click="createDetail()"> Create Detail
    </button>

    createDetail(){
        makeBackendCall().then(detail=>{
            this.$router.push({
                name: DetailView,
                params: {
                    id: detail.id
                }
            })
        })
    }

In the above code, $router is a link to the current active Vue router, and there are also other methods you can call on it, to do differend things

Upvotes: 3

Oscar Polanco
Oscar Polanco

Reputation: 61

This is a common mistake when you try to render 'detail.id' for the first time. Probably property 'id' is undefined. So you can do something like this to avoid that warn:

<router-link
    v-if="typeof detail.id !== 'undefined'" ...

Upvotes: 0

Related Questions