☰

vue js は単一のハンドラーで複数のプロパティを監視します 質問する

tag-icon • tag-icon vue.js vue-loader
vue js は単一のハンドラーで複数のプロパティを監視します 質問する

現在、いくつかのプロパティを監視する必要があります。そして、それぞれのプロパティが変更された場合は、同じ関数を呼び出す必要があります。

export default{
  // ...... rest of code 
  watch: {
    propa: function(after,before) {
      doSomething(after,before);
    },
    propb: function(after,before) {
      doSomething(after,before);
    }
    // ... so on
  }
}

そのため、上記では同じコードを複数回記述する必要があります。同じコードを複数回記述せずに、すべてのプロパティを監視し、変更ハンドラーを呼び出すだけでよいのでしょうか?

PS: 私はvue 1.xを使用しています

ベストアンサー1

更新: 2020 年 4 月

Vue 3を使用している場合、watch APIは複数のソースを受け入れることができます

import { watch, ref } from 'vue';

export default {
  setup(() => {
    const a = ref(1), b = ref('hello');

    watch([a, b], ([newA, newB], [prevA, prevB]) => {
      // do whatever you want
    });
  });
};

Vue 2の元の回答

あなたの質問を解決する公式の方法はありません（これを見て) ですが、計算プロパティをトリックとして使うこともできます:

    export default {
      // ...
      computed: {
        propertyAAndPropertyB() {
          return `${this.propertyA}|${this.propertyB}`;
        },
      },
      watch: {
        propertyAAndPropertyB(newVal, oldVal) {
          const [oldPropertyA, oldProvertyB] = oldVal.split('|');
          const [newPropertyA, newProvertyB] = newVal.split('|');
          // doSomething
        },
      },
    }

何かしたいだけで、新しい値や古い値を気にしない場合は、2行を無視してください。

    const [oldPropertyA, oldProvertyB] = oldVal.split('|');
    const [newPropertyA, newProvertyB] = newVal.split('|');

おすすめ記事