在我的应用程序中，我有一个用于发票、电子邮件等内容的模板。我希望用户能够通过拖放元素来编辑这些模板。我目前正在使用 vue-loader 和 webpack 将我的 vue 文件预编译成纯 JS。
是否可以从数据库中动态加载一个 vue 模板？我看过this发布，但这没有使用 vue-loader 所以我不确定如何通过代码覆盖我的组件上的模板。像这样的东西:
created: function () {
this.$template = '<html><p>Loaded from the DB!</p></html>'
}
会有用。这可能吗？
编辑:我尝试了以下操作，但出现错误 Failed to execute 'insertBefore' on 'Node': The node before the new node is to be inserted此节点的子节点。:
created: function () {
document.body.innerHTML = '<html><p>I AM FROM THE DB {{total}}</p></html>'
}
最佳答案
这需要修改以从您的数据库中传递模板，但这适用于非常简单的单文件组件。显然您会想要自定义，但这演示了这个概念。
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.js - 用户可编辑的 Vue 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42656573/