サーバー側レンダリング要素をVue js親に子として追加する

Question

私はサーバー側レンダリングページを "orders"に、ルートVueオブジェクトを "親オブジェクト"としてインスタンス化しました。親Vueオブジェクトの子としてレンダリングされたhtmlオーダーを開始することは可能ですか？

Vue jsはコンテンツを動的に追加するときに最適ですが、この場合、既存のマークアップから親に子を追加できます。それも可能ですか？私は解決策を見つけようとしましたが、うまくいきません。基本的に、私は体に設定された要素で"new Vue({..."を開始したVueのコンポーネントへの子供としてそれらを追加したいこの

<div id="order-1">some content</div><div id="order-2">some other content</div>

ようなサイト上のいくつかのdivを持っています。

だから、基本的に、私はこのような構造をしたい（新しいヴューを使用して）

親のApp - >注文1（レンダリングページの後に子として追加） - ページの後に子として追加>注文2（レンダリング）

Answer 1

コンポーネントにajaxコンテンツを追加しているようです。

これは、コンポーネントまたはインスタンスを再コンパイルして、ajaxコンテンツがすでにvueインスタンスの一部であるようにする必要があるためです。あなたが発射できるAJAXリクエストが完了した後

：あなたの場合は

Vue.$compile(this.$el); 

これを$エル

は、あなたの現在の要素またはコンポーネント

Answer 2

になりますグローバルコンポーネントを使用しようとしている場合、それらをあなたのreにインジェクトする必要がありますあなたがルートアプリケーションコンポーネントを返す前に、サーバーサイドで使用できるようにしてください。 Vueサーバー側は、アクセス権のないコンポーネントや定義をレンダリングできません。