Jak używać składni vue.js w szablonie ciągów z dropzone.js

Question

Obecnie próbuję wprowadzić dropzone.jsDoc Ref - do mojej aplikacji. Ale od kiedy udało mi się uruchomić podstawową funkcjonalność dropzone.js

Chcę dostosować preview-template, aby ukryć i pokazać pasek postępu przesyłania w innym stanie aplikacji.

Można dostosować preview-template, przekazując ciąg html do obiektu opcji podczas inicjowania instancji dropzone. Jak podano w dokumentach dropzone.js Ale oczywiście składnia vue nie zostanie przetworzona, jeśli po prostu posypuję ją tym ciągiem html. Musi to jakoś zostać przetworzone, aby zaimplementować rzecz.

Problem:

co chcę zrobić jest użycie vue.js składni wewnątrz tego podglądu-szablonu. To jest element, o którym mówię.

Kod:

<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-Script Kod:

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

właściciel Składnik github mówi

Niestety to, co chcesz zrobić, nie jest w tej chwili łatwe do osiągnięcia, chociaż byłoby miło. Jesteśmy obecnie planuje trochę przepisanie tego modułu więc zobaczymy, czy uda nam się wypracować jak upiec to w. Here

Answer 1

Nie można zastosować Vue w budowie w podglądu szablonu, ponieważ zrzutowiska wewnętrznie manipuluje DOM. Ale może ... W swoim hakiem 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; 
     }); 
    } 
}) 

Teraz pliki są reaktywne i mogą z nich korzystać z v-for w szablonie:

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

Można użyć innych imprez DropZone wiązać dodatkowe informacje do twoich reaktywnych danych, które możesz wykorzystać w szablonie.