Question

我的情况：我想将一个对象作为道具传递给组件。然后，我想对该对象进行深层复制，将其存储在组件的数据字段下，并将v-model存储在该复制对象的某些值上。

有问题的组件是用于编辑userInfo的模式形式。我想从父级组件中将userInfo放入模态表单，但是我希望用户只能更改表单中的userInfo，而不能更改父级。仅当用户点击userInfo时，父Submit才应更新，此时更新的用户信息将到达服务器，并且父组件将从服务器重新加载更新的userInfo。 / p>

我的问题：将数据对象设置为props对象的深层副本的最佳实践是什么？在我的示例中，我将数据对象初始化为空值，然后将这些值填充到created()方法中。这是最佳做法吗？如果没有，那么有什么更好的方法呢？

我试图直接在数据部分设置对象：

data: () => {
    return {
      localUserInfo: JSON.parse(JSON.stringify(this.userInfo);
      }
};

但是，Vue抱怨说它无法读取未定义的属性名称。这是因为v-model="localUserData.name"在尚未定义的对象localUserData上寻找属性名称。

这是我的例子：

<template>
    <div>
        <input type="text" v-model=(localUserInfo.name)>
        <input type="text" v-model=(localUserInfo.location)>
    </div>
</template>

<script>
export default {
  props: ["userInfo"],
  data: () => {
    return {
      localUserInfo: {
        name: "",
        location: ""
      }
    };
  },
  created(){
      this.localUserInfo = JSON.parse(JSON.stringify(this.userInfo);
  }
};
</script>

何时基于从props（vue.js）传递的数据对象初始化本地数据对象

0 个答案: