web-dev-qa-db-ja.com

vuejsでコンポーネントの初期データをリセットする適切な方法はありますか？

特定の開始データのセットを持つコンポーネントがあります：

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がデータ関数のスコープを取得しているため、これは理にかなっています。

スコープを継承せずに初期構成データを取得する方法はありますか？

私はこれを考え直していますか、これを行うにはより良い/簡単な方法がありますか？

初期データのハードコーディングが唯一のオプションですか？

javascriptmvvmvue.js
65
Chris Schmitz
  1. コンポーネントの外部の関数に初期データを抽出します
  2. その関数を使用して、コンポーネントに初期データを設定します
  3. その関数を再利用して、必要なときに状態をリセットします。
// 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());
    }
}
84
Linus Borg

現在のコンポーネントインスタンスのコンポーネント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オプションの突然変異は推奨されないことを念頭に置いてください。しかし、親コンポーネントが抽象モーダルのみをカスタマイズしている場合、それは正当化されるかもしれません。

29
gertas

注意、Object.assign(this.$data, this.$options.data())はコンテキストをdata（）にバインドしません。

だからこれを使う：

Object.assign(this.$data, this.$options.data.apply(this))

ccこの答えはもともと here

15
roli roli

子コンポーネント内でデータを元の状態にリセットする必要がありましたが、これが私にとってうまくいったことです：

子コンポーネントのメソッドを呼び出す親コンポーネント：

     <button @click="$refs.childComponent.clearAllData()">Clear All</button >

     <child-component ref='childComponent></child-component>

子コンポーネント：

  1. 外部関数でデータを定義する、
  2. データオブジェクトを関数の外に割り当てる

  3. 親コンポーネントによって呼び出されるclearallData（）メソッドを定義する

    function initialState() {
   return { 
     someDataParameters : '',
     someMoreDataParameters: ''
          }
  }

export default {
   data() {
    return initialState();
  },
    methods: {
  clearAllData() {
  Object.assign(this.$data, initialState());
},
0
Armin