Vueにて、ネストしたJsonのリストレンダリング

初めての質問となります。
至らない点があるかもしれませんが、申し訳ございません。

実現したい内容

Vue.jsにて、ネストされたjsonをリストレンダリングする方法を探しております。

json

[
	{
		"id":"1",
		"name":"トップ",
		"child":[{
			"id":"2",
			"name":"トップの子要素",
			"child":[{
				"id":"3",
				"name":"トップの子要素の子要素",
				"child":[]
			}
		]
	},
	{
		"id":"4",
		"name":"サブ",
		"child":[{
			"id":"5",
			"name":"サブの子要素",
			"child":[{
				"id":"6",
				"name":"サブの子要素の子要素",
				"child":[]
			}
		]
	}

]

レンダリング後の理想のHTML

<ul>
  <li>
    トップ
    <ul>
      <li>
        トップの子要素
        <ul>
          <li>
            トップの子要素の子要素
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    サブ
    <ul>
      <li>
        サブの子要素
        <ul>
          <li>
            サブの子要素の子要素
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

試したこと

v-forを試しました。
v-forは自分の認識ですと、htmlのタグブロックレベルごとの繰り返しになってしまい、
また、ネストされたデータは参照できません。

v-forにて生成されるHTML

<ul>
  <li>
    トップ
  </li>
  <li>
    サブ
  </li>
</ul>

v-forをネストすることにより、jsonの中のネストされたデータを参照可能という記事も見かけたのですが、
今回は、jsonがどれだけネストされているかが不明なため、template内でベタ書きでv-forを書きまくるのはできません。

方向性

自分はVue初学者なので、稚拙な考えであれば申し訳ないのですが、
template内のタグをjsにて変数を用いて構築し、そちらをtemplate内に出力。
出力したtemplateを、レンダリング、といった流れであれば、いけるのではないかと考えております。

jsにて

<ul><li>

をネストした階層分繋げる。
三回ネストしているのであれば、

<ul><li><ul><li><ul><li>

終了タグも同じように用意する。

</li></ul></li></ul></li></ul>

上記では、jsonのデータを出力するためのコードを入れていませんが、とりあえずhtml構造をつくれれば、と考えております。

こちらを、templateタグの中に出力、レンダリング。

こちらの内容は、Vueにて可能なのでしょうか？
また、可能であれば、手法や、参考になる記事はございますでしょうか。
不可能であれば、他に手法はございますでしょうか。

レンダリング後の理想のHTMLが出力され、かつ、Vueを用いた方法であれば、なんでも構いません。

以上、よろしくお願いいたします。

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

回答1件

ベストアンサー

vuejsのデモであるのでそちらを参考にしてください。
https://jp.vuejs.org/v2/examples/tree-view.html

しかしこれを読めだと大変な気がしたので解説とシンプルなコードを用意しました。

こういった入れ子構造(ネストしている構造)に対しては再帰でアプローチするのが一番簡単だと思います。
Vueでは、コンポーネントを定義し、コンポーネントの中で定義したコンポーネントを呼ぶということはできますので、それで再帰を実現します。
https://jp.vuejs.org/v2/guide/components-edge-cases.html#再帰的コンポーネント

子がいる限りコンポーネントを作って辿りつづけるかんじです。

propsの使い方が雑ですがdemoです
https://jsfiddle.net/cmfyz3sp/2/

treeとnodeという感じにわけると少しすっきり書ける気がします。
https://jsfiddle.net/cmfyz3sp/

欠点は再帰は制限がつけられているので、非常に深いネストだと使えません（Chromeで試した感じでは370段ぐらいまでが限界かもしれません）

投稿2021/07/07 13:28