VueJSで動的コンポーネントの追加

Question

データが入っている配列

const data = [
{type: 'Heading', text:'hogehoge'},
{type: 'Text', text:'hogehoge'},
{type: 'Image', url:'url'},
{type: 'Div', child:[{type: 'Heading', text:'hogehoge'},{type: 'Text', text:'hogehoge'}]}
]

この配列をベースに動的に下記のようなコンポーネントを生成したいのですが、どのようにすれば効率よく綺麗にコンポーネントを作れるでしょうか。

<h1>hogehoge</h1>
<p>hogehoge</p>
<img src="url"/>
<div>
<h1>hogehoge</h1>
<p>hogehoge</p>
</div>

Answer 1

以下の方法で可能だと思います。

render: function(createElement) {
}

内で、動的にDOMを生成します。必要な処理は以下の3つです。

• 与えるデータ配列の構造と、createElementに渡す引数をマッピングする
• createElementで階層構造を作りたい場合は、再帰メソッドを作成する

https://jp.vuejs.org/v2/guide/render-function.html#createElement-%E5%BC%95%E6%95%B0