forループ内でvue.jsウォッチャーを設定する

Question

Vue.jsで動的にウォッチャーを追加する実験希望の/実際の結果間の切断は、下のコメント欄に示されています。時折/アマチュアコーダーがここにあります。私は自分の問題がVueの方が少なく、JavaScriptの基礎を理解していると思っています。前もって感謝します！

new Vue({ 
    el: '#app', 
    data: { 
     a: 1, 
     b: 2, 
     c: 3 
    }, 
    methods: { 
     setUpWatchers(array) { 
      for (var i in array) { 
       var key = array[i]; 

       this.$watch(key, function(newValue) { 
        console.log(key + ': ' + newValue); 

        //desired output is: 
        // a: 4 
        // b: 5 
        // c: 6 

        //actual output is: 
        // c: 4 
        // c: 5 
        // c: 6 

       }); 
      } 
     } 
    }, 
    created() { 
     this.setUpWatchers(['a', 'b', 'c']); 

     this.a = 4; 
     this.b = 5; 
     this.c = 6; 
    } 
}); 

Answer 1

これは、古典的なjavascript "gotcha"です。

varで宣言された変数には、機能スコープがあります。 varを使用している場合ループ内で宣言された関数のうち（3を宣言しています; $ watchのハンドラ）は変数を使用しています。ループは完了後にcを指します。

すぐに変数をletと宣言してください。 letにはブロックスコープがあるので、ループ内で宣言された各関数は、関数が作成されたときの変数のコピーだけにアクセスできます。

ここでは動作例を示します。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     a: 1, 
 
     b: 2, 
 
     c: 3 
 
    }, 
 
    methods: { 
 
     setUpWatchers(array) { 
 
      for (let i in array) { 
 
       let key = array[i]; 
 

 
       this.$watch(key, function(newValue) { 
 
        console.log(key + ': ' + newValue); 
 
       }); 
 
      } 
 
     } 
 
    }, 
 
    created() { 
 
     this.setUpWatchers(['a', 'b', 'c']); 
 

 
     this.a = 4; 
 
     this.b = 5; 
 
     this.c = 6; 
 
    } 
 
});

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="app"></div>

理想的には、これらの日、あなたはletかconstを使用していないし、ほとんどないvarする必要があります。違いを説明するために利用可能な多くのリソースがあります。