v-model覆盖VueJS中的输入值

Question

我有这个输入

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

在组件edit.vue。

中

在users.vue中我有路由器链接

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

当我点击它时，我会在编辑组件上显示url上实际用户的ID。

问题在于，如果我将此v-model="userInfo.firstName"放在第一个输入中，则会覆盖我编辑的数据，即名称。

如果从该输入中删除此v-model="userInfo.firstName"，我可以看到来自数据库的输入的实际值，我的意思是实际名称。

我需要在该编辑页面中使用此v模型来获取新的输入值并将其发送回数据库。

在正常编辑中，当您单击编辑按钮时，您会看到要编辑的实际数据，而不是空输入。

那么为什么v-model会覆盖那个user.name值（来自json用户，来自数据库），我该怎样做才能看到实际值并能够在数据库中发送修改后的值输入？ / p>

Answer 1

v-model会覆盖value属性，因此您无法在同一组件上使用它们。您应该只使用v-model，并在创建组件时设置userInfo.name = user.name：

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