问题
This is using Vue 2.5.16 in IE 11. Assume a dataset array in app.data, the following works fine in Chrome (and the code is simplified):
...
<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>
...
However, in IE 11, it does not work and furthermore there is no line and character number in console error (took me some time to figure out). It just says in red:
[object Error] {description: "'datarow' is undefined" ..
It works if I remove the template tag and just put the v-for repeat in first tr and remove the 2nd one.. but I really would like to have the second one.
I assume this is a DOM issue difference in IE 11 and that IE 11 is hoisting the template tag outside the table, but don't know IF any non-standard tag will work, or if so which one will work. How can I solve this?
回答1:
The solution I found to this problem was to have multiple tbody elements in place vs. template. Multiple tbody tags are allowed in IE 11 without IE moving it out of the table and thus making the tr tag unaware of the referenced loop variables.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
There are two possible side-effects of this:
Your tbody may have been styled by CSS - mine was in bootstrap - so the appearance will be different than expected, normally with extra borders. You'll need to probably use
!importantor at least your own CSS to overcome this.At least for IE 11, load time appeared slower, but I have not tested this.
Resulting code:
<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>
来源：https://stackoverflow.com/questions/51021827/vuejs-in-ie-11-template-wrapper-for-tr-not-working-works-in-edge-and-chrome