Vuejs set value of hidden input as route param

Question

I am trying to set the value of a hidden input with a value of id so that when I submit my form, I have the id. I know that this value is being passed using a param as follows:

  <td><router-link :to="{ name: 'editclient', params: { id: client.id }}">Edit</router-link></td>

Then in my EditClient component I have the following hidden input:

 <input type="hidden" value="{{this.$route.params.id}}" v-model="id">

The issue is that this won't compile, is there another way to do this?

I can see that the value of my id is set to 1 which is what it should be in this case:

However the issue is that I can't bind this to my hidden input.

Any help is appreciated, thanks

Bert · Accepted Answer · 2017-05-24 20:04:06Z

4

In this case I would probably just use v-model

<input type="hidden" v-model="id">

And then set id either in data or when the route changes.

data(){
    return {
        id: this.$route.params.id
        ...
    }
}

edited May 24, 2017 at 20:04

answered May 24, 2017 at 19:38

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vortex Over a year ago

odd, it still seems to say that value is null yet I can see it in $route.params.id : <input type="hidden" value="">

Bert Over a year ago

Well, what is 'id'.

Vortex · Accepted Answer · 2017-05-24 19:54:50Z

1

Just for reference incase someone else hits this issue, I managed to solve this by using a computed attribute in my component:

  computed: {
            id () {
                return this.$route.params.id
            }
        },

answered May 24, 2017 at 19:54

Vortex

8161 gold badge18 silver badges31 bronze badges

Collectives™ on Stack Overflow

Vuejs set value of hidden input as route param

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related