Verschachtelte Arrays von Objekten und v-für

Question

Nun, dieses Problem stapfte hat mich ... ein bisschen Probleme, immer verschachtelten Daten-Schleife zeigen:

<div v-if = "private.folders!=null" v-for="folder in private.folders"> 
{{folder.name}} 
    <div v-for="check in folder.checks"> 
     {{check.name}} 
    </div> 
</div> 

Und dann die Daten, die ich m versuchen, sieht wie folgt zu verwenden:

folders [Array] 
-object [this is a single 'folder'] 
--name 
--checks [array] [each folder has this array] 
---[object] [the actual 'check' object] 
----[name] 

die äußere Schleife ganz gut funktioniert, und gibt die Daten, die ich erwarte. Check.name gibt jedoch nichts zurück, und in der Konsole gibt es keine Fehler. Ist es möglich geschachtelte for-Schleifen so zu machen?

Answer 1

Ich testete Sie Vorlage, es funktioniert.

new Vue({ 
 
    el: '#sample', 
 
    data: { 
 
    private: { 
 
     folders : [{ 
 
      name : 'folder1', 
 
      checks : [ 
 
      { name : 'check1.1' }, 
 
      { name : 'check1.2' } 
 
      ] 
 
     }, 
 
     { 
 
      name : 'folder2', 
 
      checks : [ 
 
      { name : 'check2.1' }, 
 
      { name : 'check2.2' } 
 
      ] 
 
     } 
 
     ] 
 
    } 
 
    } 
 
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> 
 
<div id="sample"> 
 
    <div v-if = "private.folders!=null" v-for="folder in private.folders"> 
 
    {{folder.name}} 
 
     <div v-for="check in folder.checks"> 
 
      {{check.name}} 
 
     </div> 
 
    </div> 
 
</div>