Verschachtelte Tabellenzeilen in Vue

Question

Es gab mehrere Versionen dieser Frage, aber ich habe ein bestimmtes Szenario gefunden, das ich nicht verstehen kann. Ich habe diese Vorlage auf einem übergeordneten Element:

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

So weit so gut. Das Kind Element ist:

<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> 

Es ist eine rekursive Form Linie, so dass, wenn die erste tree-item Kinder hat, werden sie als tree-item zu machen. Obwohl es gut angezeigt wird, wird es als Fragment-Instanz gerendert, daher wird die v-show-Eigenschaft ignoriert.

Irgendeine Idee, wie man das löst?

Prost

Answer 1

Sie könnten mit mehreren tbody-Tags für Ihre Mutter Schleife versuchen:

<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>