如何使用Vue.js在同一个表中嵌套多个循环

Question

我可以遍历多嵌套对象集合，同时仍显示在同一表中吗？

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

我需要按照这些原则做些事情，但这是无效的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

您在做错什么，是在一个表中放置多个tbody，在th中放置tbody，而不是thead。

您可能正在寻找类似以下的内容：http://jsfiddle.net/eywraw8t/218109/ 您可以将ul和li的部分替换为嵌套表，但是老实说，我不知道如何使表可读。

Answer 2

我想添加一个比上面的评论更完整的答案。从本质上讲，我可以想到两种以所需方式呈现数据的策略。

首先，只要数据不在所需的结构中或易于使用的结构中，就始终可以使用从原始结构派生的计算属性来构建新的数据结构。这可能是最简单的方法。

例如，这里是一个计算属性，它将您的数据重新格式化为易于迭代的结构。

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
}

这意味着您可以在模板中使用简单的循环来呈现数据。

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

以下是实际操作的示例。

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>

第二，您可以使用渲染功能。渲染功能为您提供了javascript的所有灵活性，可以决定如何渲染模板。这是我在上面的注释中想到的渲染功能。

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

这是一个实际的例子。

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

您可以使用嵌套器v-for和<template>标签实现以下目标：

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