アプリ内の変数が変更されたときにVue.js関数をトリガできる方法はありますか？Vue.jsで変数が変更されたときに時計機能をトリガー
var vm = new Vue({
el: '#demo',
data: {
variable1: 'Foo',
variable2: 'Bar',
.....
.....
variablen: 'Foo Bar'
},
watch: {
<<any variable>>: function(){
console.log('any of these variables changed');
}
}
})
まず、50個のフィールドがコードの匂いのように聞こえ、そのコードはおそらくリファクタリングする必要があるという意見に同意します。その横に
は、VUEは、あなたが$data時計を使用して全体data objectを監視し、明示的にdeep
watch: {
'$data': {
handler: function(newValue) {
console.log('Current vaules:' + newValue.FirstName + ' ' + newValue.LastName);
},
deep: true
}
}
見てください、このfiddleと、このwatch documentation抽出作業
オプションとして設定することができます：深い
オブジェクト内のネストされた値の変更も検出するには、を渡す必要があります深度内の：options引数にtrueを指定します。 Arrayの突然変異を待ち受けるために を実行する必要はありません。
@BelminBedakの発言として警告
、この例では、アーカイブすることが可能であることを示しているが、本番環境では推奨されません。
$ dataオブジェクト全体を見ることは、彼がすべき最低のオプションです。たとえば大丈夫ですが、実際のアプリでは、私はそれを行うことを提案しません。 –
完全にあなたに同意します@BelminBedak、私はちょうどその警告を追加する答えを更新しました – AldoRomo88
私はこれが可能ではないと思っていましたが、それでも私はそれをお勧めしませんでした。プロパティを個別に監視すると何が問題になりますか？あなたがする必要のあるものはありますか？たぶんもっと簡単な解決策があります。 – peaceman
変数が更新されるたびに、GETリクエストからデータを更新するなど、単一の関数をトリガする必要があるとします。私の場合、約50の畑があります。 –
おそらくデータモデルの構造が最善ではないでしょう。すべての変数をオブジェクトに格納してから、オブジェクト全体を監視してメソッドをトリガーすることができます。 –