ネストされたオブジェクトの配列と

Question

さて、この問題は私が困惑しているため、V ...トラブルのビットが現れるようにforループのデータを入れ子になった：私は「

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

そしてデータこのような使用しようとしている：

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

外側のループはうまく動作し、私が期待するデータを返します。ただし、check.nameは何も返さず、コンソールにエラーはありません。これはネストされたfor-loopsをこのようにすることは可能ですか？

Answer 1

私はテンプレートをテストしました、それは動作しています。

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>