Question

我使用django-rest-framework + vue.js

我的目标是制作一个表单来编辑用户个人资料。

这是我所拥有的：

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

我的输入绑定到数据对象“ editUser”

data() {
  return {
    'editUser': {
      email: '',
      location: '',
      bio: '',
      image: '',
    },
  }
},

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

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;
      },
    },

Answer 1

问题是您将data中的值绑定到表单，而这些值最初是空的。

我现在想到的最干净，最简单的解决方案是更新mounted lifecycle hook中的初始数据：

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

不过，还有其他解决方案。您可以使用computed setter，其getter默认为商店中的任何值，但在设置时可以被覆盖。

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

1 个答案: