代码之家 › 专栏 › 技术社区 › Oliver Williams

ie 11中的vuejs-模板包装器不工作,在edge和chrome中工作

internet-explorer-11 vue.js

2

Oliver Williams · 技术社区 · 7 年前

这是使用IE 11中的VUE 2.5.16。假设 dataset 数组在app.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正在提升 模板 标签在表外,但不知道是否有任何非标准标签将工作,或者如果有,哪一个将工作。我怎样才能解决这个问题?

1 回复 | 直到 7 年前

1

4

Oliver Williams 7 年前

我发现解决这个问题的方法是 tbody 元素就位vs. template 是的。多重 表格主体 IE 11中允许标签,而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>