VueJS в IE 11 - шаблонная оболочка для <tr>не работает, работает в Edge и Chrome

Question

Это использует Vue 2.5.16 в IE 11. Предположим, что массив 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 и удаляю второй ... но я бы очень хотелчтобы иметь второй.

Я предполагаю, что это проблема DOM в IE 11 и что 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>