我可以在 Vue.js 的 <tr> 中使用 <tr> 标签吗？

Question

我有下面的代码在 vue.js 中创建一个动态表。

<template>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>GAP</td>
    </tr>
</template>

但是这个输出不是我所期望的。结果是这样的：

我怎样才能达到我的预期输出？因为如果我尝试将它们包装在一个 <tr> 标记中，例如：

<tr>
    <tr>
        <td>
        </td>
    </tr>

    <tr>
        <td>
        </td>
    </tr>
</tr>

上面写着：

解析错误：x-invalid-end-tag

Answer 1

您可以使用tbody（或仅使用template 标签）将trs 包裹起来，并且只使用一个v-for：

 <tbody v-for="(item,index) in itemList" :key="index">
    <tr class="left-align">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align">
        <td>GAP</td>
    </tr>
 </tbody>

Answer 2

据我所知，在 HTML 中，不允许在 tr 中写入 tr。不过，您应该能够通过表格实现您想要的。

<template>
  <td>
    <table>

<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}</td>
</tr>
<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}(future)</td>
</tr>
<tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
    <td>GAP</td>
</tr>

    </table>
  </td>
</template>

预期的输出应该是：

<tr>
  <td>
    <table>

<tr>
    <td>
    </td>
</tr>

<tr>
    <td>
    </td>
</tr>

    </table>
  </td>
</tr>

处理此类错误的一个好方法是使用HTML Validator。您的 HTML 不应抛出任何错误或警告。例如，尝试复制/粘贴：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>sd</title>
</head>
<body>

<table>
<tr>
<td>
<table>
    <tr>
        <td>
            foo
        </td>
    </tr>

    <tr>
        <td>
            bar
        </td>
    </tr>
</table>
</td>
</tr>
</table>

</body>
</html>