2016-06-02 5 views
2

Я использую forloop для проверки элементов в моих данных в COMPONENT.VueJS Data ForLoop Issue

{ 
    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 возвращают '[-об: наблюдатель], который я не могу перебирать, так как длина этого значения 0 оно должно быть 2.

EDIT: это странно на моем JSBIN, все работают, но в моем реальном коде его нет. Несмотря на то, что я скопировал свою логику из своего реального кода, я использую Laravel Elixir для компиляции моего javascript и версии 1.0.24 Vue.

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

+0

Я сделал скрипку с вашим кодом, и это выглядит хорошо для меня https://jsfiddle.net/yerkopalma/rycpctgf/ ваша проблема должна быть в каком-то другом месте в коде. –

+0

см. Обновленный вопрос. – Miks

ответ

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>