用户可编辑的 Vue 模板

Question

在我的应用程序中，我有一个用于发票、电子邮件等内容的模板。我希望用户能够通过拖放元素来编辑这些模板。我目前正在使用 vue-loader 和 webpack 将我的 vue 文件预编译成纯 JS。

是否可以从数据库中动态加载 vue 模板？我见过 this post 但这没有使用 vue-loader 所以我不确定如何通过代码覆盖我的组件上的模板。类似于：

created: function () {
  this.$template = '<html><p>Loaded from the DB!</p></html>'
}

会有用。这可能吗？

编辑：我尝试了以下操作，但出现错误 Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.：

created: function () {
  document.body.innerHTML = '<html><p>I AM FROM THE DB {{total}}</p></html>'
}

Answer 1

这需要修改以从您的数据库中传递模板，但这适用于非常简单的单文件组件。显然您会想要自定义，但这演示了这个概念。

Dynamic.vue

<script>
    export default {
        props:["template"],
        data(){
            return {
                message:"hello"
            }
        },
        created(){
            this.$options.template = this.template
        }
    }
</script>

App.vue

<template>
  <div>
      <dynamic 
        v-for="template, index of templates" 
        :template="template" :key="index">   
    </dynamic>
  </div>
</template>

<script>
  import Vue from "vue"
  import Dynamic from "./Dynamic.vue"

  export default {
    name: 'app',
    data () {
      return {
        templates: [
          "<h1>{{message}}</h1>",
          "<h4>{{message}}</h4>"
        ]
      }
    },
    components:{
      Dynamic
    }
  }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

用户可编辑的 Vue 模板

User editable Vue template

vue.js

vue-component

vue-loader

vuejs2