生成されたHTMLでVueコンポーネントを挿入または初期化する

Question

データベースに保存して後でユーザーに表示する記事のHTMLを生成するWYSIWYG article editorを使用します。

動的な製品を表示するために、この自動生成されたHTMLにVueコンポーネントを挿入する必要があります。 HTMLで追加するカスタムブロックをエディタで作成できますが、Vueコンポーネントとして機能させて、データベースから直接製品の説明を更新します。

今考えているのは、商品IDのデータプロパティを持つdivを追加するボタンを追加することです。次に、コード内のそのdivを、コンポーネントを注入することによって同じIDを持つVueコンポーネントに置き換えることができます。

私が持っていたもう一つのアイデアは、単に通常のHTMLとして<product id="1031"/>などのコンポーネントを追加することでしたし、その後のVueで記事全体HTMLをコンパイルしようが、私はv-htmlディレクティブが唯一のプレーンなHTMLとしてコードをコンパイルすることをお読みください。

これは可能ですか？それとも良いアイデアはありますか？

Answer 1

あなたはVUEのフルビルドを使用している場合（実行時のみビルドしない）あなたはVUEの新しいインスタンスを初期化し、好きな場所にそれをマウントし、データを渡すことができますなど

// Main app   
 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    stuff: 'inserted message' 
 
    }, 
 
    methods: { 
 
    clicked() { 
 
     // Add new 
 
     new Vue({ 
 
     template: `<h1 style="color: red;">{{ message }}</h1>`, 
 
     parent: this, 
 
     data: { 
 
      message: 'new message' 
 
     } 
 
     }).$mount(document.getElementById('more')) 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 
<div id="app"> 
 
    There are some things here before like {{ stuff }} 
 
    but when you press <button @click="clicked()">add more</button> 
 
    you can add more things here: 
 
    <div id="more"></div> 
 
</div>