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?
データのクローンを作成して、データのコピーを作成する必要があります。データの複製にはさまざまな方法があります。lodashの関数cloneDeep
を使用することをお勧めします
postDataCopy = _.cloneDeep(postData)
次に、元のファイルを変更せずに、postDataCopy
を好きなように変更できます。
参照される変数のコピーを作成する必要があります。
// ES6
let copiedObject = Object.assign({}, originalObject)
これは、JavaScriptオブジェクトが参照によってコピーされるためです。つまり、実際にデータを保持する元のアドレス、つまりpostData
を参照しているrows
を変更しています。あなたはこれを行うことができます
postData = JSON.parse(JSON.stringify(rows))
これは、行が参照型であり、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]));
}
_
反応性は、各オブジェクトおよび配列内のObserver _protoによって引き起こされます。
各オブジェクトからovservableハッチを削除する必要がある場合は、次のオブジェクトユーティリティをミックスインとして使用できます。
const isEmpty = (value) => {
if (!value) return false;
if (Array.isArray(value)) return Boolean(value.length);
return value ? Boolean(Object.keys(value).length) : false;
};
const isNotEmpty = value => isEmpty(value);
const clone = (value) => {
if (!value) return value;
const isObject = (typeof value === 'object');
const isArray = Array.isArray(value);
if (!isObject && !isArray) return value;
// Removing reference of Array of values
if (isArray) return [...value.map(val => clone(val))];
if (isObject) return { ...value };
return value;
};
const merge = (parent, values) => ({ ...parent, ...values });
export {
isEmpty,
isNotEmpty,
clone,
merge
};
そして店でゲッター。
import { clone } from '@/utils/object';
const getData = state => clone(state.data);
export default {
getData
}