これを探してた / Tree View Example https://t.co/vv3JakWbTQ
— kntmr (@knt_mr) 2018年7月25日
ツリー表示する方法を調べてたら Vue.js の公式サイトにいい感じのサンプルがありました。このサンプルではコンポーネントを再帰することでツリーを実現しています。とても学びがありますね。
ただ、今回はツリーを開くタイミングで動的にデータを取得するようにしたかったのですが、このサンプルは初期表示の時点でツリーのデータをすべて持っています。
というわけで、サンプルをカスタマイズしてみました。
構成は公式サイトのサンプルとほぼ同じですが、今回必要のなかった箇所は移植していません。
ツリーを開くときに呼ばれる toggle メソッド内でツリーの子要素を取得します。また、2回目以降ツリーを開くたびにリクエストが飛ばないように m-loaded 属性で制御しています。
あと、ローカルで動作確認するために JSON Server を使っています。
> npm install -g json-server > json-server --watch db/db.json
