Вложенные строки таблицы в Vue

Question

Было несколько вариантов этого вопроса, но я нашел конкретный сценарий, в котором я не могу опустить голову. У меня есть этот шаблон на родительском элементе:

<tbody> 
    <tr is="tree-item" v-for="item in children" :item="item"></tr> 
</tbody> 

Пока все хорошо. Ребенок элемент:

<tr v-on:click="toggle" class="{{ classes }}"> 
    <td class="name"> 
     {{ item.tree_item_heading }} 
    </td> 
</tr> 

<tr v-show="isLoaded" is="tree-item" v-for="item in grandChildren" :item="item"></tr> 

Это рекурсивная форма линии, так что если первый tree-item есть дети, они будут отображаться как tree-item тоже. Хотя он отображается хорошо, он отображается как экземпляр фрагмента, поэтому свойство v-show игнорируется.

Любая идея о том, как это решить?

Приветствия

Answer 1

Вы можете попробовать использовать несколько TBODY тегов для родительского цикла:

<tbody v-for='item in children'> 
    <tr is="tree-item" :item="item"></tr> 
    <tr v-show="isLoaded" is="tree-item" v-for="gItem in item.children" :item="gItem"></tr> 
</tbody>