web-dev-qa-db-ja.com

VueJs 2.0でデータを再初期化する適切な方法

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

ただし、現在のメソッドは現在許可されておらず、VueJSは$ data変数の変更を禁止しています。

これで見ることができるように https://github.com/vuejs/vue/issues/287 （$ dataは変更できません。）

したがって、上記の方法を試してみると、VueJS警告が表示されます。

[Vue警告]：インスタンスルート$ dataの置き換えを避けます。代わりに、ネストされたデータプロパティを使用します。

これが私のJSコードです。

function initialState () {
        return {
            h2: 0,
            ch4: 0,
            c2h6: 0,
            c2h4: 0,
            c2h2: 0,
            c3h8: 0,
            c3h6: 0,
            co: 0,
            co2: 0,
            o2: 0,
            n2: 0,
            selected: ''
        }
    }
    export default {
        name: 'something',
        data () {
            return initialState() // This is working fine 
        },
        computed: {
            tdcg: function () {
                // some logic here...
            }
        },
        methods: {
            resetFields: function () {
                this.$data = initialState() // --> This is what I want to achieve!
            }
        }
    }

それでは、データを再初期化する正しい、最も簡単な方法は何ですか？

javascriptvue.jsvue-component
21
Sankalp Singha

Object.assign を使用して、すべてのプロパティを反復処理して割り当てることができます。

export default {
    data () {
        return {
            h2: 0,
            // other attributes...
        };
    },
    methods: {
        resetFields () {
            Object.assign(this.$data, this.$options.data.call(this));
        }
    }
}

デモのフィドルは次のとおりです。 https://jsfiddle.net/797yyvtz/

注：this.$options.dataを使用して元のdataメソッドを再度呼び出し、データの新しいコピーを取得しています。別のinitialState関数は必要ありません。 dataメソッドは初期状態関数です。

39
Joseph Silber

InitialStateオブジェクトを反復処理して、再度設定しようとしましたか？サンプルコードは次のとおりです。

function initialState() {
    return {
        h2: 0,
        ch4: 0,
        // and so on... finally
        selected: ''
    }
}

export default {
    name: 'something',
    data: function() {
        return initialState()
    },
    computed: {
        // ...
    },
    methods: {
        resetFields: function() {
            // Fetch the initialState object locally, so we do not have to call the function again
            let initialData = initialState();
            // Iterate through the props
            for (let prop in initialData) {
                // Reset the prop locally.
                this[prop] = initialData[prop];
            }
        }
    }
}

ローカルでの限られた実験では、うまくいくようです。この方法に関するあなたの考えを教えてください。

2
Mani

これを試すことができます：

  1. 必須フィールドを使用してフォームデータプロパティを初期化します。 （ステップ1で見たとおり）
  2. リセットするフォームデータのクローンを作成するために使用する別のデータフィールドを作成します（ステップ2を参照）。
  3. 必要なフォームデータの複製（ステップ3）
  4. リセット方法を書く（ステップ4）
  5. 任意の場所を使用します（ステップ5）
export default {
  // Initialize your data
  data() {
    return {
      // Initialize the form field (STEP 1)
      formFields: {
        name: '',
        email: '',
        password: '',
        moreData: {
          field1: '',
          field2: [],
        },
      },
      // Create an object property used for cloning (STEP 2)
      formFieldsCopy: {},
    };
  },

  // When the DOM is mounted copy the
  // formField you want to a temporary field
  // You can use lodash ._clone or ES6 spread operator (STEP 3)
  mounted() {
    this.formFieldsCopy = { ...this.formFields
    };
  },
  methods: {
    // Write the function to reset the form (STEP 4)
    resetFormFields() {
      this.formFields = { ...this.formFieldsCopy
      };
    },
    submit() {
      // Do you normal Axios requests here
      // and call you reset function. (STEP 5).
      this.resetFormFields();
    },
  },
};
1
Ikechi

「データ」と呼ばれるキーなどを使用して、すべてのデータを辞書にラップします。その後、this.data = {xx：yy}に設定することでデータ全体を再初期化するか、this.data.h2 = 2のような1つのデータ項目を直接変更できます。

function initialState () {
    return {
        h2: 0,
        ch4: 0,
        c2h6: 0,
        c2h4: 0,
        c2h2: 0,
        c3h8: 0,
        c3h6: 0,
        co: 0,
        co2: 0,
        o2: 0,
        n2: 0,
        selected: ''
    }
}
export default {
    name: 'something',
    data () {
        return {data: initialState()} // This is working fine 
    },
    computed: {
        tdcg: function () {
            // some logic here...
        }
    },
    methods: {
        resetFields: function () {
            this.data = initialState() // --> This is what I want to achieve!
        }
    }
}
1
seaify - Freelancer

私の解決策：

mounted(){
    this.saveData() // you can load if you need previous data
},
methods: {
    saveData(){
        localStorage.setItem(this.$options.name,JSON.stringify(this.$data));
    },
    loadData(){
        if (localStorage.getItem(this.$options.name) !== null) {
            let data= JSON.parse(localStorage.getItem(this.$options.name));
            Object.keys(data).forEach((key)=>{this[key] = data[key];});
        }
    }
}

必要に応じて、再度ロードまたは保存できます

1
Mohsen