特定の開始データのセットを持つコンポーネントがあります:
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
};
}
しかし、これは本当にずさんなようです。つまり、コンポーネントのデータプロパティを変更した場合、resetメソッドの構造を更新することを忘れないようにする必要があります。それは小さなモジュール式のコンポーネントなので絶対に恐ろしいことではありませんが、私の脳の最適化の部分は悲鳴を上げます。
私がうまくいくと思った解決策は、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
オブジェクトはデータとともに変化しています(readメソッドでは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());
}
}
現在のコンポーネントインスタンスのコンポーネントdata
をリセットするには、次を試してください。
Object.assign(this.$data, this.$options.data())
個人的には、ダイアログのさまざまな部分を埋めるためにスロットを利用する抽象モーダルコンポーネントがあります。モーダルを抽象化するカスタマイズされたモーダルラップの場合、スロットで参照されるデータは 親コンポーネント スコープに属します。以下は、カスタマイズされたモーダルが表示されるたびにデータをリセットする抽象モーダルのオプションです(ES2015コード):
watch: {
show (value) { // this is prop's watch
if(value) {
Object.assign(this.$parent.$data, this.$parent.$options.data())
}
}
}
もちろん、モーダル実装を微調整できます-上記はいくつかのcancel
フックでも実行できます。
子からの$parent
オプションの突然変異は推奨されないことを念頭に置いてください。しかし、親コンポーネントが抽象モーダルのみをカスタマイズしている場合、それは正当化されるかもしれません。
注意、
Object.assign(this.$data, this.$options.data())
はコンテキストをdata()にバインドしません。
だからこれを使う:
Object.assign(this.$data, this.$options.data.apply(this))
ccこの答えはもともと here
子コンポーネント内でデータを元の状態にリセットする必要がありましたが、これが私にとってうまくいったことです:
子コンポーネントのメソッドを呼び出す親コンポーネント:
<button @click="$refs.childComponent.clearAllData()">Clear All</button >
<child-component ref='childComponent></child-component>
子コンポーネント:
親コンポーネントによって呼び出されるclearallData()メソッドを定義する
function initialState() {
return {
someDataParameters : '',
someMoreDataParameters: ''
}
}
export default {
data() {
return initialState();
},
methods: {
clearAllData() {
Object.assign(this.$data, initialState());
},