Benutzer editierbare Vue Vorlage

In meiner App habe ich eine Vorlage für Dinge wie Rechnung, E-Mail usw. Ich möchte der Benutzer in der Lage sein, diese Vorlagen durch Drag & Drop-Elemente zu bearbeiten. Ich verwende derzeit vue-loader zusammen mit webpack, um meine Vue-Dateien in reines JS vorkompilieren.Benutzer editierbare Vue Vorlage

Ist es möglich, eine Vue-Vorlage direkt aus der Datenbank zu laden? Ich habe this Beitrag gesehen, aber dies verwendet nicht vue-loader, so dass ich nicht sicher bin, wie die Vorlage auf meiner Komponente über den Code überschrieben werden. Etwas wie:

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

wäre nützlich. Ist das möglich?

bearbeiten: Ich habe folgendes versucht, aber ich erhalte eine Fehlermeldung 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>' 
}

Quelle

2017-03-07 webnoob

Wenn Sie die einzelnen Dateikomponenten verwenden (.vue) fi les - was Sie wahrscheinlich tun, dann habe ich Angst, das ist nicht möglich. Der bessere Weg ist die Erstellung von API.Vue, auf der Client-Seite, bietet kein Modul für die Kommunikation mit DB direkt, auch Laufzeit-Build erlaubt Ihnen nicht Template-Eigenschaft direkt in die Vue-Instanz zu verwenden. –

@BelminBedak Verdammt, aber danke für die Resonanz. Ich habe gerade über Async-Komponenten gelesen (https://vuejs.org/v2/guide/components.html#Async-Components). Glauben Sie, dass sie genutzt werden könnten (ich lese immer noch)? Es sieht so aus, als könnte ich die Komponente dann deklarieren, wenn ich sie aus der DB geladen habe ... – webnoob

Lassen Sie uns zuerst klarstellen, welche DB Sie verwenden? Ist es Mongo, Firebase oder etwas anderes? –

Dies müßte in den Vorlagen aus Ihrer Datenbank zu übergeben geändert werden, aber das funktioniert in einem sehr einfachen einzelne Dateikomponente. Natürlich möchten Sie anpassen, aber dies zeigt das Konzept.

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) 
})

Quelle

2017-03-07 20:28:26 Bert

Dies erfordert die Laufzeit-only-Build, um zu arbeiten, während ich das nicht verwende. Ich kann 'vue ':' vue/dist/vue.common.js 'zu meiner Webpack-Konfiguration hinzufügen, damit diese Lösung funktioniert. Ist der einzige Nachteil der Verwendung der Laufzeitversion die Kompilierzeit der Vue Templates? – webnoob

@webnoob Ich glaube ja, sowie das zusätzliche Skript-Download. – Bert

Nun, ich denke, es sollte nach dem ersten Download zwischengespeichert werden (und meine App ist service-basiert, so dass ein zusätzlicher zweiter Download anfänglich kein Problem ist). Ich denke, es ist ein Tarif-Kompromiss. Ich werde diesen Weg gehen. Vielen Dank für Deine Unterstützung. – webnoob

Benutzer editierbare Vue Vorlage

Antwort

Verwandte Themen