Vue: Kann nicht Objekt iterieren

Question

ich folgenden Code erhalten haben:

  console.log("My Object is:"); 
      console.log(this.LoadedBaseMapLayersContent); 

      for(obj of this.LoadedBaseMapLayersContent) 
      { 
      // console.log(obj); 
       console.log("can't get this string"); 
      } 

ich überprüfen, ob this.LoadedBaseMapLayersContent Daten haben, und es scheint, dass es im Inneren bezwecken ist, aber es ist sehr seltsam Art [__ob__: Observer].

In Konsole sehe ich weiter:

My Object is: 
[__ob__: Observer] 
0: Array[1] 
__ob__: Observerlength: 1 
__proto__: Array 

Aber ich kann nicht verstehen, warum nicht mein Code kann innerhalb for of Schleife bekommen?

Answer 1

Von Reactivity In Depth

Wenn Sie eine einfache JavaScript-Objekt zu einem Vue-Instanz als Daten Option passieren, Vue.js durch alle seine Eigenschaften wandeln und wandeln sie/Setter Getter-Objekt. defineProperty. Dies ist eine ES5-only und un-shimmable Funktion, weshalb Vue.js IE8 und darunter nicht unterstützt.

Die Getter/Setter sind für den Benutzer unsichtbar, aber unter der Haube ermöglichen Vue.js, Abhängigkeits-Tracking-und Änderungsbenachrichtigung durchzuführen, wenn Eigenschaften zugegriffen oder geändert werden.

Sie zeigen nicht, was das Datenelement aussieht, aber aus dem Protokoll, es scheint, dass Sie etwas davon haben:

LoadedBaseMapLayersContent: {0: ['value']} 

, die als ein Array nicht iterable sein wird.

Answer 2

Sie können mithilfe von Object.getOwnPropertyNames auf Objektrequisiten zugreifen und das aktuelle Vue-Objekt übergeben und dann über jede Eigenschaft iterieren.

new Vue({ 
    el: '#app', 
    mounted() { 
     var self = this; 
     var listOfProps = Object.getOwnPropertyNames(this.user); 

     listOfProps.forEach(elementProp => console.log(objectProps[elementProp])); 
    }, 
    data: { 
     user: { 
      name: 'dany', 
      lastname: 'paredes' 
     } 
    } 
})