vue.js - IE 11 中的 VueJS - 的模板包装器不工作，在 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 标记提升到表外，但不知道是否有任何非标准标记会起作用，或者是否所以哪一个会起作用。我该如何解决这个问题？

Answer 1

我发现这个问题的解决方案是使用多个 tbody 元素而不是 template。 IE 11 允许使用多个 tbody 标签，而无需 IE 将其移出表格，从而使 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>