3

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

是否可以即时从数据库中加载 vue 模板？我看过这篇文章，但这没有使用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>'
}
4

1 回答 1

3

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

动态.vue

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

应用程序.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)
})
于 2017-03-07T20:28:26.317 回答