Javascript 如何在vue 2中的v模型中动态绑定值

我面临一个有趣的问题。我有两个用户表。一个表是用户，另一个表是信息。现在注册时，userinfo表可以是空的，也可以是填充的。如果已填充，则没有问题

问题是，当我创建一个表单来更新/创建（新的userinfo记录，因为他在注册时没有提供）时，我试图从数据库中获取数据并存储在一个对象中。像这样的

    data(){
      return {
          data:user[0].userinfo
        }
    },

在我的表单中，我使用v-model自动填充表单

<input type="text" v-model="data.address" />

很明显，你看到了问题所在。由于该用户没有记录，数据值将

null

另一方面，如果用户在注册时提供userinfo，则这些问题不存在，因为会有数据

如何解决此错误

目前我所做的是创建条件形式，即两种形式。一个用于为数据可用的用户进行编辑，另一个用于编辑。但是我必须创建两个表单和一些额外的编码。有没有什么方法可以避免错误并使用一种表单？

---

谢谢/

您可以先将

数据

属性定义为包含表单所需所有属性的空对象，然后将

用户信息

分配给该对象：

data() {
  let userData = {
    address: '',
    name: '',
    email: '',
  }

  return {
    data: Object.assign(userData, user[0].userinfo);
  }
},

---

这样，如果

user[0]中没有数据，userinfo

您的

data

属性仍将定义其所需的所有属性。

谢谢。非常好和聪明的方法！当复合对象有界时，我是否可以转义null，例如data（）{return{map:new map（）；}}}v-model=“map['name'].value”，其中name是类MyField的实例，我希望API在map['name']为null/未定义时自动创建对象并映射['name']=new MyField（）。在我的页面中，“name”本身不是静态定义的，而是从远程资源检索的，因此在程序运行之前我不知道它的名称，并且并非所有MyField都由相同的输入标记使用，有些由输入使用，有些由选择标记甚至表使用，等等。