Vueはデータを初期状態にリセットします

場合によっては、データ内のデータを再利用する必要がありますが、データ内のデータはさまざまなフォーム、変数などに割り当てられているため、データの値をリセットするにはどうすればよいでしょうか。

1. 値を一つずつ割り当てる

...
データ（） {
 戻る {
 名前： ''、
 性別: ''、
 説明: ''
 }
}
...
// 値を一つずつ割り当てる this.name = ''
this.sex = ''
this.desc = ''

この方法は不器用で、もちろん目的の効果は達成できますが、値を一つずつ再割り当てするのは面倒で、コードが乱雑に見えてしまいます。

次の方法は間違いなくあなたが好きなもので、1行のコードで完了します〜

2. Object.assign() を使用する

このメソッドの MDN 紹介: Object.assign() メソッドは、1 つ以上のソース オブジェクトからターゲット オブジェクトにすべての列挙可能なプロパティの値をコピーするために使用されます。対象オブジェクトを返します。

使用法: Object.assign(target, ...sources)

最初のパラメーターはターゲット オブジェクトであり、2 番目のパラメーターはソース オブジェクトです。つまり、ソース オブジェクトのプロパティをターゲット オブジェクトにコピーし、ターゲット オブジェクトを返します。

これは、あるオブジェクトのプロパティを別のオブジェクトにコピーすることです。

Vueの場合:

this.$dataは現在の状態のデータを取得します

this.$options.data() コンポーネントの初期状態のデータを取得します

したがって、リセット効果を実現するために、初期状態のデータを現在の状態のデータにコピーすることができます。

オブジェクトを割り当てます(this.$data、this.$options.data())

もちろん、データ内の特定のオブジェクトまたは属性のみをリセットしたい場合は、次のようにします。

this.form = this.$options.data().form

拡張機能

Object.assign(target, ...sources) メソッドを使用してオブジェクトをマージすることもできます。

定数 o1 = {a: 1};
定数o2 = { b: 2 };
定数o3 = { c: 3 };
obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1、b: 2、c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, ターゲットオブジェクト自体も変更されることに注意してください。

オブジェクトに同じ属性が含まれている場合は、最後の属性を取得します。

定数o1 = {a: 1、b: 1、c: 1 };
定数o2 = { b: 2, c: 2 };
定数o3 = { c: 3 };
obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 } プロパティは最後のオブジェクトのプロパティを取得します

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。