web-dev-qa-db-ja.com

Vueトリガーされないウォッチ

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
        },
    }
javascriptnode.jsvue.jsvuejs2
12
Sérgio Reis

ドキュメントから

最新のJavaScriptの制限（およびObject.observeの放棄）により、Vueはプロパティの追加または削除を検出できません。 Vueはインスタンスの初期化中にgetter/setter変換プロセスを実行するため、Vueが変換してリアクティブにするためには、データオブジェクトにプロパティが存在する必要があります。

Reactivity in Depthをご覧ください https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

13
ricardoorellana