VueJS 数据 ForLoop 问题答案

【问题标题】：VueJS Data ForLoop IssueVueJS 数据 ForLoop 问题
【发布时间】：2016-10-02 02:29:16
【问题描述】：

我正在使用 forloop 在 COMPONENT 中检查我的数据中的项目。

{
  data:function(){
    return {
      items:[
       {id:1,name:'John'},
       {id:2,name:'FooBz'}
      ]
    }
  }
}

现在我想首先在我的组件的就绪挂钩中的控制台中检查该值。

{
  .....
 ready:function(){
   console.log(this.items);
   // this return a [__ob__: Observer]
   this.items.forEach(function(x,y){
       ............
   });
 }
}

this.items 返回一个 '[ob: Observer]' 我无法迭代，因为该值的长度是 0，它应该是 2。

编辑：这在我的 JSBIN 上很奇怪，但在我的真实代码中却没有。即使我从我的真实代码中复制了我的逻辑，我仍在使用 Laravel Elixir 来编译我的 javascript 和 1.0.24 版本的 Vue。

http://jsbin.com/gijaniqero/edit?html,js,console,output

【问题讨论】：

我修改了你的代码，它看起来对我来说很好jsfiddle.net/yerkopalma/rycpctgf你的问题应该在你代码的其他地方。
查看更新的问题。

标签： vue.js

【解决方案1】：

您的代码应该没问题。

只是使用你的代码，我做了演示。应该没问题的

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<div id="app">
    <test_component></test_component>
</div>

<template id="test_component">
    <div></div>
</template>

<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data: {
        },
        components : {
            'test_component' : {
                template : '#test_component',
                data:function(){
                    return {
                        items:[
                            {id:1,name:'John'},
                            {id:2,name:'FooBz'}
                        ]
                    }
                },
                ready : function(){
                    this.items.forEach(function(x,y){
                        console.log( 'id is : ' +  x.id);
                        console.log( 'name is L ' + x.name);
                        console.log( 'key is ' + y);
                    });
                }
            }
        }
    })
</script>
</body>
</html>

【讨论】：