How to nest multiple loops in the same table using Vue.js

Question

I can I loop through multi-nested object collection while still displaying in the same table?

<table v-for="d in transaction.documents">
    <tbody>
        <tr>
            <th>Document ID:</th>
            <td>{{ d.id }}</td>
        </tr>
    </tbody>
    <tbody v-for="t in d.tasks">
        <tr>
            <th>Task ID:</th>
            <td>{{t.id}}</td>
        </tr>
    </tbody>
    <tbody v-for="a in t.actions">  <!-- t is no longer available because it's not still in the same <tbody> -->
        <tr>
            <th>Action ID:</th>
            <td>{{ a.id) }}</td>
        </tr>
    </tbody>
</table>

I need to be doing something along these lines but this is invalid HTML.

<table v-for="d in transaction.documents">
    <tbody>
        <tr>
            <th>Document ID:</th>
            <td>{{ d.id }}</td>
        </tr>
    </tbody>
    <tbody v-for="t in d.tasks">
        <tr>
            <th>Task ID:</th>
            <td>{{t.id}}</td>
        </tr>
        <tbody v-for="a in t.actions">
            <tr>
                <th>Action ID:</th>
                <td>{{ a.id) }}</td>
            </tr>
        </tbody>
    </tbody>
</table>

Answer 1

You can achieve this like below using nester v-for and the <template> tag :

<table v-for="d in transaction.documents">
    <tbody>
        <tr>
            <th>Document ID:</th>
            <td>{{ d.id }}</td>
        </tr>
    </tbody>
    <tbody v-for="t in d.tasks">
        <tr>
            <th>Task ID:</th>
            <td>{{t.id}}</td>
        </tr>
    </tbody>
    <template v-for="t in d.tasks">  <!-- This tag won't display but help you to nest two foreach -->
        <tbody v-for="a in t.actions">
            <tr>
                <th>Action ID:</th>
                <td>{{ a.id) }}</td>
            </tr>
        </tbody>
    </template>
</table>

Answer 2

I wanted to add a more complete answer than my comment above. Essentially I can think of two strategies for rendering the data the way you want.

First, whenever your data is not in a structure you want, or a structure that is easily worked with, you can always build a new data structure using a computed property that derives from the original structure. This is probably the easiest approach.

Here, for example is a computed property that re-formats your data into a structure that can be easily iterated.

tables(){
  const tables = []
  for (const document of this.transaction.documents){
    const rows = []
    for (const task of document.tasks){
      rows.push({header: "Task ID", id: task.id})
      for (const action of task.actions){
        rows.push({header: "Action ID", id: action.id})
      }
    }
    tables.push({header: "Document ID", id: document.id, rows})
  }
  return tables
}

Which means that you could use simple loops in your template to render your data.

<div id="app">
  <table v-for="table in tables">
    <tr><th>{{table.header}}</th><td>{{table.id}}</td><tr></tr>
    <tr v-for="row in table.rows">
      <th>{{row.header}}</th>
      <td>{{row.id}}</td>
    </tr>
  </table>
</div>

Here is an example of that in action.

console.clear()

new Vue({
  el: "#app",
  data:{
    transaction: {
      documents:[
        {
          id: 1,
          tasks:[
            {
              id: 1,
              actions:[
                {id: 1},
                {id: 2},
                {id: 3}

              ]
            },
            {
              id: 2,
              actions:[
                {id: 4}
              ]
            }
            
          ]
        }
      ]
    }
  },
  computed:{
    tables(){
      const tables = []
      for (const document of this.transaction.documents){
        const rows = []
        for (const task of document.tasks){
          rows.push({header: "Task ID", id: task.id})
          for (const action of task.actions){
            rows.push({header: "Action ID", id: action.id})
          }
        }
        tables.push({header: "Document ID", id: document.id, rows})
      }
      return tables
    }
  },
})

th {
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <table v-for="table in tables">
    <tr><th>{{table.header}}</th><td>{{table.id}}</td><tr></tr>
    <tr v-for="row in table.rows">
      <th>{{row.header}}</th>
      <td>{{row.id}}</td>
    </tr>
  </table>
</div>

Second, you could use a render function. Render functions give you all the flexibility of javascript in deciding how to render your template. Here is the render function I came up with in the comment above.

methods:{
  buildTable(h, document){
    const rows = []
    // build and add the document row
    const documentRow = h("tr", [h("th", "Document ID"), h("td", document.id)])
    rows.push(documentRow)

    // build the task rows
    for (const task of document.tasks){
      const taskRow = h("tr", [h("th", "Task ID"), h("td", task.id)])
      rows.push(taskRow)

      //build the action rows
      for (const action of task.actions){
        const actionRow = h("tr", [h("th", "Action ID"), h("td", action.id)])
        rows.push(actionRow)
      }
    }

    return rows
  }
},
render(h){
  const tables = []
  for (const document of this.transaction.documents)
    tables.push(h("table", this.buildTable(h, document)))

  return h("div", tables)
}

And here is an example of that in action.

console.clear()

new Vue({
  el: "#app",
  data:{
    transaction: {
      documents:[
        {
          id: 1,
          tasks:[
            {
              id: 1,
              actions:[
                {id: 1},
                {id: 2},
                {id: 3}

              ]
            },
            {
              id: 2,
              actions:[
                {id: 4}
              ]
            }
            
          ]
        }
      ]
    }
  },
  methods:{
    buildTable(h, document){
      const rows = []
      // build and add the document row
      const documentRow = h("tr", [h("th", "Document ID"), h("td", document.id)])
      rows.push(documentRow)
      
      // build the task rows
      for (const task of document.tasks){
        const taskRow = h("tr", [h("th", "Task ID"), h("td", task.id)])
        rows.push(taskRow)
        
        //build the action rows
        for (const action of task.actions){
          const actionRow = h("tr", [h("th", "Action ID"), h("td", action.id)])
          rows.push(actionRow)
        }
      }
      
      return rows
    }
  },
  render(h){
    const tables = []
    for (const document of this.transaction.documents)
      tables.push(h("table", this.buildTable(h, document)))
    
    return h("div", tables)
  }
})

th {
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app"></div>

Answer 3

What you are doing wrong is placing multiple tbody inside one table and th inside tbody instead of thead.

You might be looking for something like this: http://jsfiddle.net/eywraw8t/218109/ You can replace ul and li parts with nested tables, but to be honest I've no idea how you want to make your table readable.