ユーザー編集可能なVueテンプレート

私のアプリでは、請求書、メールなどのテンプレートを用意しています。これらのテンプレートをドラッグ＆ドロップで編集できるようにしたいと考えています。私は現在、vue-loaderとwebpackを使って、私のvueファイルを純粋なJSにあらかじめコンパイルしています。ユーザー編集可能なVueテンプレート

オンザフライでデータベースから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 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>' 
}

出典

2017-03-07 webnoob

あなたは、単一のファイルのコンポーネントを使用している場合（.vue ）fiあなたはおそらくそうしていますが、これは可能ではないと恐れています。より良い方法は、APIをビルドすることです。クライアント側では、DBとの直接通信のためのモジュールを提供しません。 vueインスタンスにテンプレートプロパティを直接使用する。 –

@BelminBedakくそー、共鳴してくれてありがとう。私はちょうど '非同期コンポーネント'（https://vuejs.org/v2/guide/components.html#Async-Components）について読みました。あなたは彼らがレバレッジを取ることができると思いますか（私はまだ読んでいます）？ DBからロードしたときにコンポーネントを宣言して解決できるようです... – webnoob

まず、使用しているDBを明確にしましょう。それはモンゴー、ファイアーベースなのでしょうか？ –

これは、データベースからテンプレートに渡すように変更する必要がありますが、これは非常にシンプルで動作します単一ファイルコンポーネント。明らかにカスタマイズしたいと思うでしょうが、これはコンセプトを示しています。

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

出典

2017-03-07 20:28:26 Bert

これは私がそれを使用していないのに対し、実行するためには実行時のみのビルドが必要です。このソリューションを動作させるには、「vue」：「vue/dist/vue.common.js」をWebpackの設定に追加できます。ランタイムバージョンを使用する唯一の欠点は、vueテンプレートのコンパイル時間ですか？ – webnoob

@webnoob私はそう信じているだけでなく、追加のスクリプトのダウンロード。 – Bert

さて、最初のダウンロード後にキャッシュされるべきだと思う（と私のアプリはサービスに基づいているので、最初は余分なセカンドダウンロードが問題ではない）と思う。私はこのルートを下ります。あなたの援助に多くの感謝。 – webnoob

ユーザー編集可能なVueテンプレート

答えて

関連する問題