Существует ли совместимый с IE11 обходной путь, позволяющий Vue отображать несколько строк таблицы на элемент в цикле for?

Question

Я хотел бы визуализировать несколько строк таблицы на элемент в цикле v-for без обертывания элементов в другом элементе, например. <tbody>.

Например

<table>
  <tbody>
    <tr></tr>
    <!-- v-for="item in items" -->
      <tr></tr>
      <tr></tr>
    <!-- /v-for -->
  </tbody>
</table>

У меня это работает в Chrome с использованием <template> в качестве корневого элемента, как показано ниже, однако этот подход не работает в Internet Explorer 11.

<table>
  <tbody>
    <tr></tr>
    <template v-for="item in items">
      <tr></tr>
      <tr></tr>
    </template>
  </tbody>
</table>

Более подробный пример здесь https://plnkr.co/edit/wfsFvbifAwq7ycZv?p=info

Я ищу способ достижения того же результата, но с тем, чтобы он работал с IE11.

В шаблонах Vue JS должен быть один корневой элемент, и рекомендованным способом является обтекание строк таблицы в <tbody>, но в моем случае строки уже находятся в теле, а вложенные tbodys недопустимы.

Я знаю, что UX в моем примере не очень хорош, но я не могу его легко изменить, поэтому мне не нужны предложения по изменению макета страницы, если нет других вариантов.

Answer 1

Ответ Линусом Боргом на форумах Vue

https://forum.vuejs.org/t/is-there-an-ie11-compatible-workaround-to-get-vue-to-render-multiple-table-rows-per-item-in-a-for-loop/61814/2

Подход не работает в IE, если элемент шаблона определен непосредственно на странице HTML.

Это работает, если я использую строковый шаблон или элемент, чтобы обернуть шаблон, то есть ::100100

<script type="x-template" id="table-template">
  <table>
    <tbody>
      <template v-for="item in items">
       <!-- ... -->
      </template>
    </tbody>
  </table>
</script>
new Vue({
   //...
  template: '#table-template'
})

Спасибо, Линус <3 </p>