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

Question

这是在 IE 11 中使用 Vue 2.5.16。假设在 app.data 中有一个 dataset 数组，以下在 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 标签提升到 table 之外，但不知道是否有任何非标准标签将起作用，或者如果是的话，哪个将起作用。我该如何解决这个问题？

Answer 1

我发现这个问题的解决方案是使用多个 tbody 元素而不是 template。 IE 11 中允许使用多个 tbody 标签，而无需 IE 将其移出 table，从而使 tr 标签不知道引用的循环变量。

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>

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

VueJS in IE 11 - template wrapper for <tr> not working, works in Edge and Chrome

internet-explorer-11

vue.js