VueJS in IE 11 - template wrapper for <tr> not working, works in Edge and Chrome
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>