Question

我的项目目前是使用VueJS制作的。现在，我们需要使用输入数据处理某个模板，然后存储结果并使用它来发送电子邮件（例如）。

我可以使用用户数据渲染模板并保存吗？如何？

我不想为此目的使用其他库，除非我们不能使用VueJS

我读过SSR。但我不想使用服务器端渲染。这个想法只是呈现某些消息。遵循这样的行为：

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>

我希望我让我理解。提前谢谢。

Answer 1

假设您的模板存储在组件中，您可以添加导出方法：

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>

然后你只需要在模板组件上调用exportHTML方法来检索HTML。

使用VueJs保存模板

1 个答案: