v-model overwrite input value in VueJS

Question

I have this input

<input type="text" :value="user.firstName" v-model="userInfo.firstName">

that is in a component edit.vue.

In users.vue I have router link

<router-link :to="'/users/edit-user/'+user.id"><a>Edit</a></router-link>

and when I click it takes me on edit component with the id of the actual user on url.

The problem is that if I put this v-model="userInfo.firstName" in that first input overwrites the data that I bring to edit it, the name.

If I delete this v-model="userInfo.firstName" from that input I can see the actual value of the input, that comes from database, I mean the actual name.

I need this v-model, in that edit page, to take the new input value and send it back to database.

In a normal edit, when you click on edit button, you suppose to see the actual data to edit it, not an empty input.

So why v-model overwrites that user.name value(that comes from a json users, from database) and what can I do to make a see the actual value and be able to send the modified value input in database?

Tomer · Accepted Answer · 2017-09-12 13:54:20Z

4

v-model overrides the value property, so you can't use both on the same component. You should use only v-model and just set userInfo.name = user.name when the component is created:

created (){
 this.userInfo.name = this.user.name
}

answered Sep 12, 2017 at 13:54

Tomer

17.9k16 gold badges82 silver badges139 bronze badges

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

3 Comments

user6385799 Over a year ago

ok I understand, but if put what you said in my code, the input in the edit page is still empty even in the url I see users/edit-user/48. I initialize user in data and set it up on the method that brings the specific user: ``` getUsers() { this.$http.get('/user/' + this.$route.params.id) .then((response) => { this.user = response.data; }) }```

user6385799 Over a year ago

and the userInfo is the same in data: userInfo: { firstName: '', lastName: '', email: '', password: '', phone: '', idCard: '', departmentId: 1, function: '', jobTitle: '', cityId: '', countryId: '', userTypeId: 1 } and used in the put method: axios.put('/user/' + this.$route.params.id, this.userInfo)

Tomer Over a year ago

please post the components so i can see what you're doing

Collectives™ on Stack Overflow

v-model overwrite input value in VueJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related