CODEWITHSUNDEEP
vue.js
user6385799
user6385799

Reputation:

v-model overwrite input value in VueJS

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?

Upvotes: 1

Views: 6865

Answers (1)

Tomer
Tomer

Reputation: 17940

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
}

Upvotes: 4

Related Questions