如何在vue 2中的v-model中动态绑定值

Question

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

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

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

在我的表单中，我使用v-model

自动填充表单

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

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

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

我该如何解决这个错误？

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

Answer 1

您可以首先将data属性定义为具有表单所需的所有属性的空对象，然后将该对象指定为userinfo：

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

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

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