Comment utiliser la syntaxe vue.js dans un modèle de chaîne avec dropzone.js

Question

J'essaie actuellement de mettre en œuvre dropzone.jsDoc Ref - dans mon application. Mais depuis que j'ai réussi à exécuter la fonctionnalité de base de dropzone.js

Je veux personnaliser le preview-template pour cacher et montrer la barre de progression de téléchargement pendant l'état de l'application différente.

Je peux personnaliser le preview-template en passant une chaîne html à l'objet options lors de l'initialisation de l'instance dropzone. Comme indiqué dans les docs dropzone.js Mais évidemment la syntaxe vue ne va pas être traitée si je saupoudre simplement sur cette chaîne html. Il doit en quelque sorte être traité pour mettre en œuvre la chose.

Problème:

Ce que je veux faire est d'utiliser la syntaxe vue.js dans cet aperçu-modèle. C'est le composant dont je parle.

code:

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

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

composant propriétaire dit github,

Malheureusement, ce que vous voulez faire n'est pas facilement réalisable pour le moment, même si ce serait bien. Nous prévoyons actuellement un peu d'une réécriture de ce module que nous allons voir si nous pouvons comment cuire cela dans. Here

Answer 1

Vous ne pouvez pas appliquer Vue dans la construction dans le modèle de prévisualisation, depuis dropzone interne manipule le DOM. Mais vous pouvez ... Dans votre mounted crochet:

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

maintenant les fichiers sont réactifs et vous pouvez les utiliser avec v-for dans votre modèle:

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

Vous pouvez utiliser d'autres événements Dropzone pour lier des informations supplémentaires à vos données réactives que vous pouvez utiliser dans le modèle.