Question

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

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

现在我想在我的组件的ready hook中首先检查控制台中的值。

{
  .....
 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

Answer 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>

VueJS Data ForLoop问题

1 个答案: