반응형
사용자 편집 가능한 Vue 템플릿
제 앱에는 청구서, 이메일 등의 템플릿이 있습니다.사용자가 요소를 드래그 앤 드롭하여 템플릿을 편집할 수 있도록 하고 싶습니다.현재 사용하고 있습니다.vue-loader와 함께webpack내 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>'
}
데이터베이스에서 템플릿을 전달하려면 이 방법을 수정해야 하지만 매우 간단한 단일 파일 구성요소에서 작동합니다.커스터마이즈하고 싶은 것은 분명하지만, 이것은 개념을 나타내고 있습니다.
역학.표시하다
<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.discloss.main.discloss.
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
언급URL : https://stackoverflow.com/questions/42656573/user-editable-vue-template
반응형
'programing' 카테고리의 다른 글
| C는 C++의 서브셋이 아닐까요? (0) | 2022.06.12 |
|---|---|
| Vue 라이프 사이클 리스너를 동적으로 추가하는 방법 (0) | 2022.06.12 |
| java.util.stream에서 목록 가져오기Java 8에서의 스트림 (0) | 2022.06.12 |
| 밀리초를 "hh:mm:ss" 형식으로 변환하는 방법 (0) | 2022.06.12 |
| Vue.js - vue-axios 응답 데이터를 저장 및 표시하려고 할 때 공리가 정의되지 않음 (0) | 2022.06.12 |