[vue.js]ページループで補間html文字列をレンダリング

2006 ワード
vue.js
バックグラウンドからhtmlテキストが渡され、ページにレンダリングされる必要があります.
それは通常のやり方で、vueのv-html命令を利用して、直接このようにレンダリングします:しかし、問題は、バックグラウンドから送られてきたhtmlテキストが補間された文字列であることです. {{str.name}}v-htmlは静的htmlしかレンダリングできないことを知っていますので、Vueを使用する必要があります.componentはグローバルコンポーネントを登録し、templateプロパティに補間htmlを挿入します.
html:

js:テストデータの追加:
 data() {
    return {
     showdata:{
        id:0,
        name:'  '
     }
    };
  },

登録テンプレート
var mstr = '
{{str.name}}
';
Vue.component("mytemplate", {
    props: ["str"],
    template: mstr
});

注意:htmlコンポーネントのパラメータ名、追加したdomノードのオブジェクト名、テンプレート登録時のprops名の3つは必ず一致します
ここでは、通常受信したjsonオブジェクトではなく、バックグラウンドインタフェースからhtmlファイルが転送される開発時に発生するもう一つの問題を挿入します.そのため、パッケージされたリクエスト関数を使用することはできません.別途書く必要があります.
 axios
      .post(
        "/university-facade/file/download.shtml?id=" + this.queryObj.template,
        {
          headers: {
            "Content-Type": "text/html"
          }
        }
      )
      .then(response=> {
      },
        err => { 
      }
);

このようにリクエストヘッダを「text/html」に変更すればいいのですが、別のタイプのファイルが転送されている場合は、下図のモディファイヤリクエストヘッダのパラメータを参照してください
多くのテンプレートをロードする必要がある場合はどうすればいいのでしょうか?まず複数のコンポーネントをループして登録します
list.map((item, index) => {
    var str = '
{{item.htmlstr}}
';
    Vue.component(`cmp-${index}`, {
    props: ["row"],
    template: str
    });
});

htmlで登録されたこれらのコンポーネントをループレンダリングする

getComponentName関数でisプロパティをバインドし、どのテンプレートをレンダリングすべきかを決定します.
 getComponentName(index) {
      return `cmp-${index}`;
    }
Vue 2 0初期化からコンパイルパッケージパブリケーションへ
自分で書いたマルチスレッドオブジェクトプール