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プロパティは無視されます。

これを解決する方法はありますか？あなたの親ループのために複数のtbodyタグを使用して試みることができる

乾杯

Answer 1

：

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