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

此方法有两个可能的副作用：

您的身体可能已经过CSS样式设置-我的身体处于引导状态-因此外观会与预期的不同，通常带有额外的边框。您可能需要使用!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-无法使用模板包装器，在Edge和Chrome中工作

1 个答案: