时间戳

首页 > 解决方案 > Vue.js 动态绑定 v-model 和 value

vue.js - Vue.js 动态绑定 v-model 和 value

问题描述

我使用 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-model？当前数据在这里：

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

标签： vue.jsvuex

解决方案

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

我现在能想到的最干净和最简单的解决方案是更新mounted生命周期钩子中的初始数据：

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

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

推荐阅读