リセットVueJSデータ特性

Question

Iは、渡された成分prop介して初期データプロパティを提供し、データ変数に格納されているコンポーネントを有する：

<component :propvar="true"></component> 

data() { 
    return { 
    localvar: this.propvar, 
    localvar2: true 
    } 
} 

Iが復帰できるようにしたいとこの小道具の値に戻ってデータ変数は、このような方法でボタンを「リセット」打つとき：

methods: { 
    reset() { 
    Object.assign(this.$data, this.$options.data()); 
    } 
} 

問題がthis.options.data()経由小道具の値を参照するときに、データ変数がundefinedであるということである：

console.log(this.$options.data()); => Object {localvar: undefined, localvar2: true}

Example Fiddle

Answer 1

あなたが本当にもう一度data()方法を焼成することにより、データのすべてのプロパティをリセットする必要がある場合、あなたはそのようにそれを行うことができます。

methods: { 
    reset() { 
    Object.assign(this.$data, this.$options.data.call(this)); 
    } 
} 

でthis変数this.$options.dataは、vueコンポーネントのインスタンスではなくオプションを参照しています。そのため、localvarプロパティはundefinedでした。したがって、vueインスタンスから呼び出す場合は、関数call() methodを使用してthisへの参照を渡す必要があります。

---

しかし、ほとんどの状況では、私はちょうど代わりObject.assignを呼び出すの値を直接割り当てます：

methods: { 
    reset() { 
    this.localvar = this.propvar; 
    } 
}