如何在Vue 2中的V模型中动态绑定值

Question

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

问题是，当我创建一个要更新/创建的表单（用户注册时未提供的新的userinfo记录）时，我尝试从数据库中获取数据并将其存储在对象中。 像这样

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

在我的表单中，我使用v模型自动填充表单

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

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

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

我该如何解决这个错误？

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

Answer 1

您可以先将data属性定义为一个空对象，其中包含表单所需的所有属性，然后将该对象分配给userinfo ：

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

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

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