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

现在警报（i）结果是正确的：0 1 2

但是“this”关键字引用了“window object”而不是“new vue object”。

这个问题让我发疯了......请帮帮忙。

Answer 1

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

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

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

在我看来，你尝试使用Vue而没有它为可恢复组件提供的任何有用功能......

话虽如此，如果你想＆＃34;缓存＆＃34;实际运行i时created可用的结果，您应该将其添加为data道具

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

在循环中创建炸药Vue组件

1 个答案: