vuejs复制数据对象并删除属性也会从原始对象中删除该属性

Question

我在Vue中有一个看起来像这样的数据对象

rows[
0 {
  title: "my title",
  post: "my post text",
  public: false,
  info: "some info"
},
1 {
 title: "my title",
  post: "my post text"
  public: true,
  info: "some info"
},
2 {
 title: "my title",
  post: "my post text"
  public: false,
  info: "some info"
}
]

然后，我将该对象复制并删除某些属性（如果需要），然后将对象发布到我的后端，如下所示：

var postData = this.rows;
      postData.forEach(function(o) {

        if (o.public === true) {
          delete o.info;
        }
      });

      var uploadData = {};
      uploadData.blogpost = postData;
      axios({
          method: 'post',
          url: myUrl,
          responseType: 'json',
          data: uploadData
        })

问题是，这delete o.info;还将从我的vm根数据中删除该属性，而且我不理解为什么，因为我创建了一个新的变量/将根数据复制到了该根数据中。那么，如何在发布数据之前从数据中删除某些对象属性而不更改vue中的根数据vm？

Answer 1

这是因为在 javascript 中对象是按引用复制的，这意味着尽管您正在更改postData哪个实际上是引用保存数据的原始地址，即rows. 你可以这样做

postData = JSON.parse(JSON.stringify(rows))

Answer 2

您需要通过克隆复制数据。有多种克隆数据的方法，我建议使用lodash函数，cloneDeep

postDataCopy = _.cloneDeep(postData)

然后，您可以postDataCopy根据需要进行修改，而无需修改原始文件。

Answer 3

您需要复制参考变量。

// ES6
let copiedObject = Object.assign({}, originalObject)