在循环中创建 dynamite 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 这是正常的 但是 alert(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'
});

现在 alert(i) 结果正确：0 1 2

但是“this”关键字指的是“window object”而不是“new vue object”。

这个问题让我抓狂......请帮忙。

Answer 1

好吧，创建的函数将在很久以后执行，当组件实际创建时（而不是在注册时，这是你在 for 循环中所做的）。

此时，for循环已经/可能已经完成，所以i = 2（我写了可能是因为Vue中DOM更新等的异步性）

你为什么这样做？整个过程闻起来像是一个很大的反模式。为什么不能使用一个libcomponent 并将数据作为道具传递？为什么将所有这些数据直接保存在 Vue 实例 (this.itemUrl= ...) 而不是组件的 data？

在我看来，您尝试使用 Vue 时却没有它为可重用组件提供的任何有用功能...

话虽如此，如果你想“缓存”i 的结果，以便在created 实际运行时可用，你应该将其添加为data 属性

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