İçiçe nesnelerin diziler ve

Question

Eh, bu sorun beni şaşırtan için-v ... sorun biraz göstermek için-döngü verilerini iç içe alma olması: Ben

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

Ve sonra veri Kullanmaya çalışıyorum m şöyle:

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

Dış döngü gayet iyi çalışıyor ve beklediğim verileri döndürüyor. Ancak, check.name hiçbir şey döndürmez ve konsolda hiç hata yok. Bunun için iç içe geçmiş döngüler yapmak mümkün mü?

Answer 1

Size bir şablon testi yaptım, işe yarıyor.

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>