[解決済み] vuejsでコンポーネントの初期データをリセットする適切な方法はありますか?
2022-09-05 05:25:03
質問
特定の開始データのセットを持つコンポーネントがあります。
data: function (){
return {
modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue'
submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes'
addressToConfirm: null,
bestViewedByTheseBounds: null,
location:{
name: null,
address: null,
position: null
}
}
これはモーダルウィンドウ用のデータで、表示されたときにこのデータで始まるようにしたい。ユーザーがウィンドウからキャンセルした場合は、すべてのデータをこのデータにリセットしたい。
データをリセットするメソッドを作成し、手動ですべてのデータプロパティを元の状態に戻すことができることは知っています。
reset: function (){
this.modalBodyDisplay = 'getUserInput';
this.submitButtonText = 'Lookup';
this.addressToConfirm = null;
this.bestViewedByTheseBounds = null;
this.location = {
name: null,
address: null,
position: null
};
}
しかし、これは本当にずさんだと思います。つまり、もし私がコンポーネントのデータプロパティを変更したら、リセットメソッドの構造を更新することを忘れないようにする必要があるということです。これは小さなモジュール式のコンポーネントなので、絶対にひどいというわけではありませんが、私の脳の最適化部分が悲鳴を上げることになります。
私がうまくいくと思った解決策は、初期データプロパティを
ready
メソッドで初期データのプロパティを取得し、保存されたデータを使用してコンポーネントをリセットすることです。
data: function (){
return {
modalBodyDisplay: 'getUserInput',
submitButtonText: 'Lookup',
addressToConfirm: null,
bestViewedByTheseBounds: null,
location:{
name: null,
address: null,
position: null
},
// new property for holding the initial component configuration
initialDataConfiguration: null
}
},
ready: function (){
// grabbing this here so that we can reset the data when we close the window.
this.initialDataConfiguration = this.$data;
},
methods:{
resetWindow: function (){
// set the data for the component back to the original configuration
this.$data = this.initialDataConfiguration;
}
}
しかし
initialDataConfiguration
オブジェクトはデータとともに変化しています (これは理にかなっています。なぜなら読み込みメソッドでは
initialDataConfiguration
はデータ関数のスコープを取得しているからです。
スコープを継承せずに初期設定データを取得する方法はないでしょうか?
私が考えすぎていて、もっと良い/簡単な方法があるのでしょうか?
初期データをハードコーディングすることが唯一の選択肢でしょうか?
どのように解決するのですか?
- 初期データをコンポーネント外の関数に抽出する
- その関数を使用して、コンポーネントに初期データを設定します。
- 必要なときに状態をリセットするためにその関数を再利用する。
// outside of the component:
function initialState (){
return {
modalBodyDisplay: 'getUserInput',
submitButtonText: 'Lookup',
addressToConfirm: null,
bestViewedByTheseBounds: null,
location:{
name: null,
address: null,
position: null
}
}
}
//inside of the component:
data: function (){
return initialState();
}
methods:{
resetWindow: function (){
Object.assign(this.$data, initialState());
}
}
関連
-
[解決済み] ブラウザのウィンドウが現在アクティブでないことを検出する方法はありますか?
-
[解決済み】vuejs 子コンポーネントから親データを更新する
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] これは純関数ですか?
-
[解決済み] 変異を伴わないオブジェクトからの値の削除
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?