VueJsを使ってテンプレートを保存する

Question

私のプロジェクトは現在VueJSで作られています。さて、入力データで特定のテンプレートを処理し、その結果を保存して電子メールを送信する必要があります（たとえば）。

テンプレートをユーザーデータでレンダリングして保存できますか？どうやって？

私たちは、私がSSRについて読んだことがあるVueJS

を行うことができない場合を除き、この目的のために別のライブラリを使用したくありません。しかし、私はサーバー側のレンダリングを使用したくありません。アイデアは特定のメッセージをレンダリングするだけです。このような振る舞いに続き：

save: function(){ 
    userNote.user = ... 
    userNote.message = document.getElementById('message').innerHtml; 
    saveToServer(userNote); 
} 

メッセージテンプレート：

<div id="message"> Dear {{user.name}}, please confirm that {{notes}} before {{date}}</div> 

私は私が私が理解して作ら願っています。 ありがとうございます。

var templateComponent = Vue.component("template-component", { 
 
    template: "<p>Hello {{name}}</p>", 
 
    props: ["name"], 
 
    methods: { 
 
    exportHTML: function() { 
 
     return this.$el.outerHTML; 
 
    } 
 
    } 
 
}); 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    name: "David", 
 
    html: undefined 
 
    }, 
 
    methods: { 
 
    getHTML: function() { 
 
     this.html = this.$refs.template.exportHTML(); 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script> 
 
<div id="app"> 
 
    <div style="display: none"> 
 
     <template-component :name="name" ref="template"></template-component> 
 
    </div> 
 

 
    <label>Name 
 
     <input v-model="name"> 
 
    </label> 
 

 
    <button @click="getHTML">Get html</button> 
 

 
    <pre>{{ html }}</pre> 
 
</div>

次に、あなただけのHTMLを取得するためのテンプレート・コンポーネントにexportHTMLメソッドを呼び出す必要があります：あなたのテンプレートがコンポーネントに格納され、エクスポートメソッドを追加したと仮定すると

Answer 1

。