在循环中创建炸药 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循环is/may已经完成，所以i = 2（我写的可能是因为DOM在Vue中更新等的异步性）

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

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

也就是说，如果您希望 "cache" i 的结果在 created 实际上是运行时可用，您应该将其添加为 data道具

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

在循环中创建炸药 Vue 组件

Creating dynamite Vue components in a loop

components

loops

vue.js