Vue.js v-for でのテーブルのネスト

実現したいこと

v-forでのテーブルのネストが可能なのか、それとも他の方法で実現した方がいいのかご教授頂きたいです。

下記のようなオブジェクトの配列があったときに、

Vue
1 "combinations": [
2        {
3            "id": 1,
4            "name": "配合１",
5            "amount": 15,
6            "combination_materials": [
7                {
8                    "id": 1,
9                    "combination_id": 1,
10                    "name": 材料１
11                    "amount": 5,
12                    
13                },
14  
15                {
16                    "id": 2,
17                    "combination_id": 1,
18                    "name": 材料2
19                    "amount": 2,
20                    
21                },
22        },
23        {
24            "id": 2,
25            "name": "配合2",
26            "amount": 20,
27            "combination_materials": [
28                {
29                    "id": 3,
30                    "combination_id": 2,
31                    "name": 材料3
32                    "amount": 5,
33                    
34                },
35  
36                {
37                    "id": ,
38                    "combination_id": 2,
39                    "name": 材料4
40                    "amount": 2,
41                    
42                },
43        },
44]
45

下記のようなテーブルを作成したいです。（親の行の直下に子の行を入れるの繰り返し）

name	amount
配合１	15
材料1	5
材料2	2
配合２	20
材料3	5
材料4	2

試したこと

下記の下のコードを試しましたが、下記上の表のように親要素の横にくっついてしまう形になってしまい、見た目が悪くなってしまいます。
また、できれば子要素は最初は隠しておいて、親の行をクリックしたらドロップダウンで子が表示されるようにしたいと考えています。

name	amount
配合１	15	材料1	5
	材料2	2
配合２	20	材料3	5
	材料4	2
```
<b-table-simple>
<b-thead>

<b-th>name</b-th>
<b-th>amount</b-th>

</b-thead> <b-tbody> <b-tr v-for="c in combinations" :key="c.key"> <b-td>{{ c.name }}</b-td> <b-td>{{ c.amount }}</b-td> <b-tr v-for="cm in c.combination_materials" :key="cm.key"> <b-td>{{ c.name }}</b-td> <b-td>{{ c.amount }}</b-td> </b-tr> <b-tr> </b-tbody> </b-table-simple> ```

そもそもテーブルでこのような表現はできるのでしょうか。ご教授お願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

以下のように<template>を使えば、実現できると思います

      <b-tbody>
        <template v-for="c in combinations" :key="c.id">
          <b-tr>
            <b-td>{{ c.name }}</b-td>
            <b-td>{{ c.amount }}</b-td>
          </b-tr>
          <template v-for="cm in c.combination_materials" :key="cm.id">
            <b-tr>
              <b-td>{{ cm.name }}</b-td>
              <b-td>{{ cm.amount }}</b-td>
            </b-tr>
          </template>
        </template>
      </b-tbody>

参考