Как сделать компонент vue с несколькими корневыми элементами tr?

Question

[Тимур Евгажуков]

Нужно создать компонент vue, у которого несколько корневых элементов tr. Не совсем понимаю как это можно сделать. Т.е. такой компонент может генерировать от одной, до нескольким строк в таблице. Например, если эта строка в таблице не активна, то показывается только она сама, когда она становится активной, таблица как бы разъезжается и показываются дополнительные строки

Answer 1

[Алексей Ярков]

Да откройте уже для себя https://github.com/y-nk/vue-fragments и перестаньте мучиться ))

Comments

[Тимур Евгажуков]

Не знал про него! Спасибо. То что нужно

Answer 2

[Сергей delphinpro]

Как обычно https://ru.vuejs.org/v2/guide/list.html#v-for-%D0%...

jsfiddle.net/589szoue

Comments

[Тимур Евгажуков]

Я так уже пробовал через дополнительный тег template (если вы об этом). Не получается, выдает ошибку:
The template root disallows '<template>' elements

[Сергей delphinpro]

Тимур Евгажуков, покажите код, как выводите строки

[Сергей delphinpro]

Тимур Евгажуков, обновил ответ

[Тимур Евгажуков]

<template>
  <tr v-bind:class="{ 'table-primary': current }">
    <th>{{item.day}}</th>
    <td>{{item.title}}</td>
    <td align="center">{{item.unit}}</td>
    <td align="right">{{item.count.toFixed(3)}}</td>
    <td align="right" width="120">{{item.price.toFixed(2)}} руб.</td>
    <td align="right" width="120"><span v-if="item.type == 'work'">{{(item.count * item.price).toFixed(2)}} руб.</span></td>
    <td align="right" width="120"><span v-if="item.type == 'material'">{{(item.count * item.price).toFixed(2)}} руб.</span></td>
    <td align="right" width="120">{{(item.count * item.price).toFixed(2)}} руб.</td>
  </tr>
</template>

<script>
export default {
  name: "WorkDay",
  props: {
    item: {
      type: Object,
      required: true
    },
    current: {
      type: Boolean,
      required: true
    }
  }
}
</script>

<style scope>
.table td, .table th {
  padding: 5px;
  font-size: 14px;
}
</style>

вот код, сейчас выводится одна строка таблица, а нужно чтобы компонент генерировал по необходимости еще несколько строк, вложенный тег template в качестве root элемента тут же выдает ошибку