vue watchメソッドを使用しようとしていますが、deep:true
。
私のコンポーネントでは、次のフォームを作成するフィールドである配列を小道具として受け取ります。フォームを構築し、crudModelCreate
というオブジェクトに動的にバインドすることができ、すべて正常に機能します(vue devツールを参照し、フォームを計画どおりに送信することもできます)
しかし、その動的オブジェクトの変更を監視しようとすると問題が発生します。
<md-input v-for="(field, rowIndex) in fields" :key="field.id" v-model="crudModelCreate[field.name]" maxlength="250"></md-input>
...
data() {
return {
state: 1, // This gets changed somewhere in the middle and changes fine
crudModelCreate: {},
}
},
...
watch: {
'state': {
handler: function(val, oldVal) {
this.$emit("changedState", this.state);
// this works fine
},
},
'crudModelCreate': {
handler: function(val, oldVal) {
console.log("beep1")
this.$emit("updatedCreate", this.crudModelCreate);
// This doesn't work
},
deep: true,
immediate: true
},
}
ドキュメントから
最新のJavaScriptの制限(およびObject.observeの放棄)により、Vueはプロパティの追加または削除を検出できません。 Vueはインスタンスの初期化中にgetter/setter変換プロセスを実行するため、Vueが変換してリアクティブにするためには、データオブジェクトにプロパティが存在する必要があります。
Reactivity in Depthをご覧ください https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats