## 実現したいこと v-forでのテーブルのネストが可能なのか、それとも他の方法で実現した方がいいのかご教授頂きたいです。下記のようなオブジェクトの配列があったときに、 ``` Vue "combinations": [ { "id": 1, "name": "配合１", "amount": 15, "combination_materials": [ { "id": 1, "combination_id": 1, "name": 材料１ "amount": 5, }, { "id": 2, "combination_id": 1, "name": 材料2 "amount": 2, }, }, { "id": 2, "name": "配合2", "amount": 20, "combination_materials": [ { "id": 3, "combination_id": 2, "name": 材料3 "amount": 5, }, { "id": , "combination_id": 2, "name": 材料4 "amount": 2, }, }, ] ``` 下記のようなテーブルを作成したいです。（親の行の直下に子の行を入れるの繰り返し） |name|amount| |---|---| |配合１|15| |材料1|5| |材料2|2| |配合２|20| |材料3|5| |材料4|2| ## 試したこと下記の下のコードを試しましたが、下記上の表のように親要素の横にくっついてしまう形になってしまい、見た目が悪くなってしまいます。また、できれば子要素は最初は隠しておいて、親の行をクリックしたらドロップダウンで子が表示されるようにしたいと考えています。 |name|amount||| |---|---|---|---| |配合１|15|材料1|5| |||材料2|2| |配合２|20|材料3|5| |||材料4|2| ```

name

amount

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

	@@ -1 +1 @@
1	- Nuxt.js v-for でのテーブルのネスト
1	+ Vue.js v-for でのテーブルのネスト

質問編集履歴