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

Question

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

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

Answer 1

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

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

Comments

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

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

Answer 2

[0xD34F]

Никак. О том, что корневой элемент должен быть один - прямо сказано в документации.

Правда, можно сделать такой компонент, который после монтирования будет перемещать потомков корневого элемента в родительский элемент, а сам корневой элемент удалять - в результате всё будет выглядеть так, будто и в самом деле у одного компонента было несколько корневых элементов. Если хотите, могу сделать небольшой пример того, как это могло бы выглядеть, но лично я бы вам не советовал идти подобным путём - ведь это хак, проблем огрести можно немало.

UPD. Есть вариант использовать render-функцию. Из неё можно вернуть массив элементов, если компонент функциональный. Так что с ограничениями, но всё-таки есть способ сделать компонент с несколькими корневыми элементами.

UPD. Ну конечно же, раз у вас таблица, никаких нескольких корневых элементов не нужно. Сделайте корневым элементом компонента tbody, а уже внутри него организовать показ дополнительных строк не будет проблемой:

<tbody>
  <tr>
    <!-- здесь основной контент -->
  </tr>
  <template v-if="условие показа дополнительного контента">
    <tr v-for="...">
      <!-- здесь дополнительный контент -->
    </tr>
  </template>
</tbody>

https://jsfiddle.net/5h0qsf26/

Comments

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

Не люблю хаки, чаще всего это означает, что не правильно изначально распланировано все. Так что буду думать как иначе отображать

[0xD34F]

Распланировано-то может и правильно. Просто Vue подобного не позволяет.

Answer 3

[Сергей 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 элемента тут же выдает ошибку