IE 11 中的 VueJS - 的模板包装器不工作，但在 Edge 和 Chrome 中工作

这是在 IE 11 中使用 Vue 2.5.16。假设datasetapp.data 中的数组，以下内容在 Chrome 中运行良好（并且代码已简化）：

...
<tbody>
<template v-for="(datarow, index) in dataset">
    <tr><td> {{ datarow }} {{ index }} </td></tr>
    <tr v-if="!(index % 50)"><td> -repeating header row- </td></tr>
</template>
</tbody>
...

然而，在 IE 11 中，它不起作用，而且控制台错误中没有行和字符号（花了我一些时间才弄清楚）。上面只是用红色写着：

[object Error] {description: "'datarow' is undefined" ..

如果我删除它就有效template标签并放置v-for在第一个重复tr并删除第二个..但我真的很想要第二个。

我认为这是 IE 11 中的 DOM 问题差异，并且 IE 11 正在提升template标签在表外，但不知道是否有任何非标准标签可以工作，或者如果可以，哪一个可以工作。我该如何解决这个问题？

我发现这个问题的解决方案是有多个tbody到位的要素对比template。多种的tbodyIE 11 中允许使用标签，而无需 IE 将其移出表格，从而使tr标记不知道引用的循环变量。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody

这样做有两个可能的副作用：

• 你的 tbody 可能是由 CSS 设计的 - 我的是 bootstrap - 所以外观会与预期不同，通常有额外的边框。你可能需要使用!important或者至少你自己的 CSS 可以克服这个问题。

• 至少对于 IE 11，加载时间显得较慢，但我还没有对此进行测试。

结果代码：

<table>
<tbody v-for="(datarow, index) in dataset">
    <tr><td> {{ datarow }} {{ index }} </td></tr>
    <tr v-if="!(index % 50)"><td> -repeating header row- </td></tr>
</tbody>
<tbody>
    <!-- not posted above but I used another template/tr for the case of no records found; substituted with just another tbody -->
</tbody>
</table>