web-dev-qa-db-ja.com

vuejsがデータオブジェクトをコピーしてプロパティを削除すると、元のオブジェクトからもプロパティが削除されます

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ルートデータからプロパティを削除します。新しい変数を作成したか、ルートデータをそのルートデータにコピーしたため、理由がわかりません。ルートデータを変更せずに投稿する前にデータから特定のオブジェクトプロパティを削除するにはどうすればよいですかvm in vue？

javascriptecmascript-6vue.jsvuejs2
10
user2722667

データのクローンを作成して、データのコピーを作成する必要があります。データの複製にはさまざまな方法があります。lodashの関数cloneDeepを使用することをお勧めします

postDataCopy = _.cloneDeep(postData)

次に、元のファイルを変更せずに、postDataCopyを好きなように変更できます。

9
Mikkel

参照される変数のコピーを作成する必要があります。

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

これは、JavaScriptオブジェクトが参照によってコピーされるためです。つまり、実際にデータを保持する元のアドレス、つまりpostDataを参照しているrowsを変更しています。あなたはこれを行うことができます

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

これは、行が参照型であり、postDataが行と同じ参照を指しているためです。参照なしでコピー（ディープコピー）するには、オブジェクト/配列にオブジェクトや配列などの参照型ではなく、値の型（数値、文字列、ブールなど）のみが含まれている場合にObject.assignを使用できます。オブジェクトにオブジェクトを含むオブジェクトのような参照型が含まれている場合、内部でコピーされたオブジェクトは参照型になります。

例1：

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

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

ユーザーからプロパティをコピーします。したがって、ユーザーには値タイプのみが含まれるため、userとコピーされたユーザーは異なるオブジェクトです

例2：

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

};

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

これで、ユーザーからすべてのプロパティがコピーされますが、ユーザーには参照タイプ（オブジェクト）であるother_infoが含まれています。そのため、値のタイプであるcopyedUserプロパティを変更してもユーザーには影響しませんが、copyedUserまたはユーザーのother_infoを変更すると、お互いに影響します。

_copiedUser.name ="new name";_ //ユーザーには反映されません

_copiedUser .other_info.country = "new country";_ //ユーザーにも反映されます

したがって、Object.assignは1つのレベルにコピーされます。オブジェクトにネストされたオブジェクトまたは配列が含まれている場合は、最後のレベルまで反復してコピーする必要があります。

Object.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]));
}
_
1
No one

反応性は、各オブジェクトおよび配列内のObserver _protoによって引き起こされます。

各オブジェクトからovservableハッチを削除する必要がある場合は、次のオブジェクトユーティリティをミックスインとして使用できます。

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
}
0
Mukundhan