Nested Arrays of Objects and v-for

Question

Well, this problem puzzled me ... Having a bit of trouble getting the attached loop data to display:

<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 I'm trying to use is as follows:

 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 very well and returns the expected data. However, check.name does not return anything, and there are no errors in the console. Is it possible to do nested for such loops?

Answer 1

I tested your template, it 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>