Passed prop to vue-router is not set immediately

Question

I have set up my vue-router like so:

<router-view action="/test"></router-view>

In one of my router components I have set up a prop like this:

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

But this results in an error:

vue.esm.js:574 [Vue warn]: Missing required prop: "action"

If I simply echo out the action inside my template it has been set though and the vue devtools look fine:

{{ action }}

It seems the prop simply does not reach the component fast enough for the initial required check.

Am I wrong to assume this should simply work?

Answer 1

Blockquote

Bind data with the colon : . Change your router tag to

<router-view :action="'/test'"></router-view>