ループ内にダイナマイトVueコンポーネントを作成する

Question

最近、ループ内にVueコンポーネントを作成するときにワイヤの問題が発生しました。

for(let i=0;i<testInfo.length;i++) 
{ 
    $("#home").append("<lib_" + testInfo[i]['lib_id'] + "></lib_" + testInfo[i]['lib_id'] + ">"); 
    console.log(i); 

    Vue.component('lib_' + testInfo[i]['lib_id'], { 
     template: '#' + testInfo[i]['lib_id'], 
     created: function() { 
      this.count=i; 
      this.libTitle=testInfo[i]['lib_title']; 
      this.row=testInfo[i]['row']; 
      this.imgUrl=testInfo[i]['img_url']; 
      alert(i); 
      this.itemUrl=testInfo[i]['item_url']; 
      this.libNum=testInfo[i]['lib_num']; 
      this.libNumMax=testInfo[i]['lib_num_max']; 
     }, 
     data: function(){ 
      } 
    }); 
} 
new Vue({ 
    el: '#home' 
}); 

にconsole.log（i）の結果：0 2 2有線である：ただし、アラート（i）の結果は 正常0 1 2。

最初はループでクロージャを作成することに関連して問題があると思ったので、「var i」を「let let」に変更しましたが、動作しません。

そして、私は

for(let i=0;i<testInfo.length;i++) 
{ 
    $("#home").append("<lib_" + testInfo[i]['lib_id'] + "></lib_" + testInfo[i]['lib_id'] + ">"); 
    console.log(i); 

    Vue.component('lib_' + testInfo[i]['lib_id'], { 
     template: '#' + testInfo[i]['lib_id'], 
     created: function() { 
      this.count=i; 
      this.libTitle=testInfo[i]['lib_title']; 
      this.row=testInfo[i]['row']; 
      this.imgUrl=testInfo[i]['img_url']; 
      alert(i); 
      this.itemUrl=testInfo[i]['item_url']; 
      this.libNum=testInfo[i]['lib_num']; 
      this.libNumMax=testInfo[i]['lib_num_max'];  
     }(i), 
     data: function(){ 
      } 
    }); 
} new Vue({ 
    el: '#home' 
}); 

を以下のように私のコードを変更する今、アラート（I）結果が正しい：0 1 2

しかし、 "ウィンドウオブジェクト" に "この" キーワードREFERE新しいvueオブジェクトではなく、新しいvueオブジェクトです。

この問題は私を狂ってしまう...助けてください。

Answer 1

さて、作成された関数は、コンポーネントが実際に作成されたとき（つまり、登録されていないとき、つまりforループで行っているとき）に実行されます。この時点で

、forループ/既に終了することができるので、あなたがこれを行うなぜ私は= 2

（私は理由Vueの中などのDOM更新の非同期の月を書いた）のか？全体のプロセスは、大きな反パターンのようなにおいをします。なぜ1つのlibコンポーネントを使用して、そのデータを小道具として渡すことができないのですか？なぜ、コンポーネントのdataではなく、Vueインスタンス（this.itemUrl= ...）にすべてのデータを直接保存するのですか？

あなたが「キャッシュ」にしたい場合はiの結果があることを、言われていること

...あなたはそれを再suableコンポーネント用proides便利な機能のいずれかなしのVueを使用しようと私には思えます利用可能createdが実際に実行されたとき、あなたはdata小道具

data: function() { 
    return { 
    i: i 
    } 
}