Vue.js动态绑定v模型和值

我使用django rest框架+vue.js

我的目标是制作一个表单来编辑用户配置文件

以下是我所拥有的：

<input type="email" v-model="userEdit.email">
<input type="text" v-model="userEdit.location">
<input type="text" v-model="userEdit.bio">

因此，现在我可以将此对象发送到服务器并更改用户配置文件信息

sendChanges() {
  const fd = new FormData();
  fd.append('image', this.editUser.image, this.editUser.image.name)
  fd.append('email', this.editUser.email)
  fd.append('location', this.editUser.location)
  fd.append('bio', this.editUser.bio)
  this.axios.put(userDetailURL + this.routeUser, fd)
    .then(response => {
      console.log(response)
    })
    .catch(error => {
      console.log(error.response)
    })
},

此表单可以工作并更新信息，但有一件事我不喜欢：

输入字段始终为空，用户需要填写所有字段，然后才能按“保存”按钮

即使用户只想更改“位置”，他也必须填写其他空输入

向输入添加动态

：value=“userDetail.email”

——无需工作

是否有其他方法将当前值添加到输入字段中，并且仍然具有v型？ 当前数据如下：

computed: {
      userDetail() {
        return this.$store.getters.userDetail;
      },
    },

---

问题是您正在将

数据中的值绑定到表单，而这些值最初是空的

目前我能想到的最干净、最简单的解决方案是在以下位置更新初始数据：

不过，还有其他解决方案。您可以使用其getter默认为存储中的任何内容，但在设置时可以被覆盖。
这是什么意思？您正在使用空字符串
'
作为输入。在此处传递默认值。“我的输入被绑定到数据对象“editUser”“”是否有其他方法将当前值添加到输入字段，并且仍然具有v模型？”您阅读了指南吗@mutaputa可以自由回答你自己的问题。将来还会有其他人遇到同样的问题
computed: {
      userDetail() {
        return this.$store.getters.userDetail;
      },
    },

mounted () {
  // Use Object.clone to prevent modifying the userDetail object directly
  this.editUser = Object.clone(this.$store.getters.userDetail)
}