dropzone.jsを含む文字列テンプレート内でvue.js構文を使用する方法

Question

現在、私のアプリケーションにdropzone.jsDoc Refを実装しようとしています。しかし、私はdropzone.jsの基本機能を実行していたので

preview-templateをカスタマイズして、さまざまなアプリケーション状態でアップロードプログレスバーを非表示にして表示したいと考えています。

dropzoneインスタンスの初期化中に、オプションオブジェクトにhtml文字列を渡して、preview-templateをカスタマイズできます。 dropzone.js文書に記載されていますが、明らかに、このhtml文字列に単純に振りかけると、vueの構文は処理されません。何とか処理する必要があります。

は問題：

私は何をしたいことは、このプレビューテンプレート内vue.js構文を使用することです。 これは私が話しているコンポーネントです。

コード：

<dropzone id="myVueDropzone" :use-custom-dropzone-options=true 
      :dropzoneOptions="dzOptions" 
      :url="photosForm.uploadImageUrl" 
      v-on:vdropzone-removed-file="deleteImage" 
      :preview-template="templatePreview" 
      v-on:vdropzone-success="showSuccess"> 
</dropzone> 

Vueのスクリプトコード：

import Dropzone from 'vue2-dropzone'; 
export default { 

    methods: { 

     templatePreview(){ 
      return ` 
        <div class="dz-preview dz-file-preview"> 
         <div class="dz-image" style="width: 200px;height: 180px"> 
          <img data-dz-thumbnail /> 
         </div> 
         <div class="dz-details"> 
         <div class="dz-size"><span data-dz-size></span></div> 
         <div class="dz-filename"><span data-dz-name></span></div> 
         </div> 

         <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
         <div class="dz-error-message"><span data-dz-errormessage></span></div> 
         <div class="dz-success-mark"><i class="fa fa-check"></i></div> 
         <div class="dz-error-mark"><i class="fa fa-close"></i></div> 
        </div> 
        <div class=""> 
         <select class="form-control" title="" name="image_type"> 
          <options v-for="type in image_type" value="type.value">{{ type.title }}</options> 
         </select> 
        </div> 
       `; 
     } 
    }, 
} 

Github Resource、Github Issue

githubののコンポーネントの所有者が言う、

残念ながら、あなたのやりたいことは現時点では容易ではありませんが、うまくいくでしょう。私たちは、この中を焼く方法を考え出すことができれば、我々が表示されますので、我々は現在、このモジュールの書き換えのビットを計画している。Here

Answer 1

をあなたが内部的にドロップゾーン以来、プレビューテンプレートでビルドでのVueを適用することはできませんDOMを操作します。しかし、あなたは...あなたのmountedフックであり：今

new Vue({ 

    data() { 
     return { 
      files: [] 
     } 
    }, 

    mounted(){ 
     var vm = this; 

     // create your dropzone instance using reference to the target div 
     var dz = new Dropzone(vm.$refs.dropzone /*, { opts }*/); 

     // update data.files whenever new files are added 
     dz.on('addedfiles', function(files){ 

      // convert files (an array like object) to real array 
      files = Array.from(files); 

      // add some additional properties (link, accepted...) 
      // before files are registered to the `vm` instance 
      // so that Vue may convert them into reactive 
      files.forEach(file => file.link = file.accepted = undefined); 

      // files now may be added to `vm`; 
      vm.files = files; 
     }); 
    } 
}) 

ファイルは、反応性であり、あなたはあなたのテンプレートにv-forでそれらを使用することがあります。

<template> 
    <div> 
     // this is the dropzone area 
     <div ref="dropzone"></div> 

     // list the files 
     <p v-for="file in files"> {{file.name}} </p> 
    </div> 
</template> 

あなたは追加の情報をバインドするために、他のドロップゾーンのイベントを使用することができますテンプレート内で使用する可能性のある反応性のあるデータに変換します。