2016-06-13 11 views
0

私は、LaravelアプリケーションでgulpとbrowserifyでVueJSを使用しています。動的に受け取ったhtmlコンテンツからコンポーネントを初期化する

私のvueコンポーネントは、通常のhtmlファイルまたはブレードファイルで正常に動作しています。

この問題は、ページが読み込まれた後にhtmlを読み込もうとしたときにのみ発生します。 (vueスクリプトのロード後...)

例:コンポーネントの署名が<todo-list />であると仮定します。私はモーダル内でロードしようとしています。署名を含むhtmlは、jQueryのAjax呼び出しからdinamicallyロードされます。 $.ajax()。私が知っている

代:

  1. 問題の原因は簡単です:ページがすでにロードされていたので、本体に取り付けられたVUEスクリプトがあまりにもロードされているので、それは私のコンポーネントの署名を認識することはできませんdinamic htmlコンテンツから読み込まれます。

  2. 私は "onShow"モーダルイベントを使用できます。問題は、を呼び出す方法がわからないということです。これらのコンポーネントタグを解析するすべてのhtmlをもう一度チェックするVueJSを呼び出します。

+0

コンパイル後に実際にvueコンポーネントを読み込むことはできません。代わりに、v-ifまたはv-showを表示してデータオブジェクトにバインドする必要があります。ページがコンパイルされるまでにロードされない可能性のある非同期データのウォッチまたは計算されたプロパティを使用することができます – vbranden

答えて

1

v-ifまたはv-showディレクティブでこの問題を解決できませんでした。解決するために

、私は呼び出して、もう一度Vueのアプリケーションを「コンパイル」するために必要な:

var node = $('#ROOT_NODE_OF_COMPONENT').get(0); 
this.$compile(node); 

実行このコードをリモートのHTMLコンテンツは、DOMにロードされた後。

PS:VueJS v1.0

関連する問題