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

您可以像下面这样使用 nester 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>