vuejs复制数据对象并删除属性也会从原始对象中删除该属性 [英] vuejs copying data object and removing property will remove the property from original object as well

问题描述

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

I have a data object in vue that looks like this

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"
}
]

然后我复制该对象并根据需要删除某些属性，然后再将该对象发布到我的后端，如下所示:

I then copy that object and remove certain properties if needed before posting the object to my backend like this:

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 ?

The problem is that delete o.info; will also remove the property from my vm root data, and I dont understand why since I created a new varible/copied the root data into that one. So how can I remove certain object properties from my data before posting it without altering my root data vm in vue ?

推荐答案

您需要通过克隆获取数据的副本.有多种克隆数据的方法，我建议使用lodash函数cloneDeep

You need to take a copy of your data by cloning it. There are various ways of cloning the data, I would recommend using lodash's function, cloneDeep

postDataCopy = _.cloneDeep(postData)

postDataCopy = _.cloneDeep(postData)

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

Then you can modify postDataCopy as you like without modifying the original.

这篇关于vuejs复制数据对象并删除属性也会从原始对象中删除该属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！