如何使用 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

v-for您可以使用 Nester和标签来实现如下所示<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>