Nested arrays of objects and v-for

Question

Well, this problem has me stumped... Having a bit of trouble getting nested for-loop data to show up:

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

And then the data that I'm trying to use looks like this:

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

The outer loop works just fine, and returns the data I expect. However, check.name doesn't return anything, and there are no errors in the console. Is it possible to do nested for-loops like this?

Answer 1

I tested you template, it's works.

 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>

Answer 2

This is how you might set it up with HTML table:

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">  <table>    <tr>      <th>Folder</th>      <th>Checks</th>      <th>Checks</th>    </tr>    <tr v-if = "private.folders!=null" v-for="folder in private.folders">    <td><b>{{folder.name}}</b></td>        <td v-for="check in folder.checks">           {{check.name}}        </td>    </tr>  </table>  </div>