Создание динамических компонентов 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 1 2, который является нормальным Однако результат оповещения (I): 0 2 2 проводной.

Сначала я думал, что это проблема, связанная с созданием замыкания в цикле, поэтому я изменил «var i» на «let i», но он не работает.

И потом, я изменил код следующим

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' 
}); 

Теперь предупреждение (я) правильный результат: 0 1 2

Но «это» ключевое слово refere в «окне объекта» а не «новый объект vue».

Эта проблема заставляет меня сходить с ума ... Пожалуйста, помогите.

Answer 1

Ну, созданная функция будет выполнена намного позже, когда компонент будет создан (а не когда он зарегистрирован, что вы делаете в цикле for).

На данный момент, для петли/может быть уже закончена, поэтому я = 2 (я писал мая из асинхронности DOM обновления и т.д. в Vue)

Почему вы это делаете? Весь процесс пахнет большим анти-шаблоном. Почему вы не можете использовать один компонент lib и передавать данные в качестве реквизита? почему вы аккуратно сохраняете все эти данные в экземпляре Vue (this.itemUrl= ...) вместо data компонента?

Мне кажется, вы пытаетесь использовать Vue без каких-либо полезных функций, она proides для повторного компонентов ... могущий быть привлеченным в качестве ответчика

Это, как говорится, если вы хотите «кэш» результат i быть доступны при created на самом деле работать, вы должны добавить его в качестве опоры data

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