Vue router - missing param for named route

Question

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?

Answer 1

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