javascript - 如何在 vue 2 的 v-model 中动态绑定(bind)值

Question

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

问题是，当我创建一个表单来更新/创建(用户信息的新记录，因为他在注册时没有提供。)我尝试从数据库中获取数据并存储在一个对象中。像这样的东西

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

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

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

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

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

我该如何解决这个错误？

目前我所做的是创建条件形式意味着两种形式。一种用于编辑其数据可用的用户，另一种用于编辑。但我必须创建两种形式和一些额外的编码。有什么方法可以避免错误并使用一种形式吗？ 谢谢/

Answer 1

您可以首先将您的data 属性定义为一个具有表单所需的所有属性的空对象，然后将该对象分配给userinfo:

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

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

这样，如果 user[0].userinfo 中没有数据，您的 data 属性仍将定义所有需要的属性。