vuews复制数据对象并删除属性也将从原始对象中删除属性

mcdcgff0  于 2022-12-14  发布在  Vue.js
关注(0)|答案(5)|浏览(243)

我在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呢?

yruzcnhs

yruzcnhs1#

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

import _ from 'lodash'
...
postDataCopy = _.cloneDeep(postData)

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

jgwigjjp

jgwigjjp2#

这是因为在javascript中,对象是通过引用复制的,这意味着尽管你正在改变postData,它实际上是引用保存数据的原始地址,即rows。你可以这样做

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

busg9geu3#

您需要复制引用的变量。

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

6gpjuf904#

这是因为行是引用类型并且postData指向与行相同的引用。要在没有引用的情况下复制(深层复制),可以使用Object.assign,如果对象/数组只包含值类型(如数字、字符串、布尔值等),而不包含引用类型(如Object或Array)。如果对象包含引用类型(如对象包含对象),则内部复制的对象将是引用类型。
例一:

var user = {
name: "abc",
address: "cde"
};

var copiedUser = Object.assign({}, user);

它从user复制属性所以user和copiedUser是不同对象,因为user只包含值类型
例二:

var user = {
name: "abc",
address: "cde",
other_info: { // reference type
   country: "india"
}

};

var copiedUser = Object.assign({}, user);

现在,它将复制user的所有属性,但user包含引用类型(对象)的other_info。因此,更改值类型的copiedUser属性不会影响user,但更改copiedUser或user的other_info会相互影响。
copiedUser.name ="new name";//将不会反映在用户中
copiedUser .other_info.country = "new country";//也将反映在用户中
所以Object.assign会复制到一个层次。如果你的对象包含嵌套对象或数组,你需要迭代并复制到最后一个层次。
对象。assign也接受{}和[]。所以你也可以返回数组。
例如:var copiedArray= Object.assign([], [1,3,4,5]);
所以对于你的情况,我认为你需要迭代你的数组,直到对象,然后复制和推到另一个数组;

var rows = [
 {
  title: "my title",
  post: "my post text",
  public: false,
  info: "some info"
},
{
 title: "my title",
  post: "my post text",
  public: true,
  info: "some info"
},
 {
 title: "my title",
  post: "my post text",
  public: false,
  info: "some info"
}
];

var postData = [];

for(var i=0;i<rows.length;i++) {
postData.push(Object.assign({}, rows[i]));
}
ar7v8xwq

ar7v8xwq5#

React性是由每个对象和数组内部的Observer _proto引起的。
如果需要从每个对象中删除可观察的填充线,可以使用以下对象实用程序作为mixin。

const isEmpty = (value) =&gt; {

if (!value) return false;

if (Array.isArray(value)) return Boolean(value.length);

return value ? Boolean(Object.keys(value).length) : false;

};

const isNotEmpty = value =&gt; isEmpty(value);

const clone = (value) =&gt; {

if (!value) return value;

const isObject = (typeof value === 'object');

const isArray = Array.isArray(value);

if (!isObject &amp;&amp; !isArray) return value;

// Removing reference of Array of values

if (isArray) return [...value.map(val =&gt; clone(val))];

if (isObject) return { ...value };

return value;

};

const merge = (parent, values) =&gt; ({ ...parent, ...values });

export {

isEmpty,

isNotEmpty,

clone,

merge

};

和在存储吸气剂。

import { clone } from '@/utils/object';

const getData = state =&gt; clone(state.data);
export default {
   getData
}

相关问题