3

私のデータベース Web アプリケーションでは、テーブルごとに 1 つずつ、非常に多くの異なるページが必要です。アプリケーションに含まれるページはユーザーごとに異なるため、事前にすべてのページを含めたくありません。これにより、必要以上に大きくなり、起動時に遅くなる可能性があるためです。

これまでの私のアプリケーションにはVue、すべてのページのデータを保持するインスタンスが 1 つしかありません。それぞれのサブオブジェクトはdata. vue-resourceデータは(を使用して) JSON としてオンザフライで読み込まれる$http.get()ため、起動時dataはかなり空です。

ここで、ページの HTML を動的にロードし、それらを既存のVueインスタンスにバインドする方法が必要です。以前は jQuery でページを読み込んでいましたが、この Vue アプリケーションでこれを行うと、読み込んだページのコンテンツにデータがバインドされません。

Vue コンポーネントを調べましたが、これはページ全体ではなく、ページ上の反復可能な (小さな) 要素に適しているようですが、間違っている場合は修正してください。

vueify、 、browserifyにも出くわしましWebpackたが、これらは今の私には少し高度すぎるようです。以前に含まれていたように、いくつかの HTML を読み込んで Vue で使用したいだけです。

誰かがこれを行う正しい方法を説明してもらえますか?

アップデート

Vueパーシャルは解決策のようです:

あなたのHTMLファイルで:

<partial :name="currentModule"></partial>

そしてあなたのJavascriptで:

  var moduleid = "page1";
  var url = moduleid + ".html";

  myvue.$http.get(url, function(data, status, request){
      Vue.partial(moduleid, data);
      myvue.currentModule = moduleid;
  });

これはvue-resourceAJAX を使用しますが、これはjquery.ajax()や他のものでも行うことができます。

4

0 に答える 0