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

您可以使用tr（或仅使用tbody标签）包装template，并且仅使用一个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>

我可以在Vue.js中使用标签吗？

2 个答案: