Cách sử dụng cú pháp vue.js bên trong một mẫu chuỗi với dropzone.js

Question

Tôi hiện đang cố gắng triển khai dropzone.jsDoc Ref - vào ứng dụng của tôi. Nhưng vì tôi đã quản lý chức năng cơ bản của dropzone.js

Tôi muốn tùy chỉnh preview-template để ẩn và hiển thị thanh tiến trình tải lên trong trạng thái ứng dụng khác nhau.

Tôi có thể tùy chỉnh preview-template bằng cách chuyển chuỗi html đến đối tượng tùy chọn trong khi khởi tạo phiên bản dropzone. Như đã nêu trong tài liệu dropzone.js Nhưng rõ ràng cú pháp vue sẽ không được xử lý nếu tôi chỉ cần rắc nó lên chuỗi html này. Nó bằng cách nào đó đã được xử lý để thực hiện điều này.

Vấn đề:

gì tôi muốn làm là sử dụng vue.js cú pháp bên này xem trước mẫu. Đây là thành phần tôi đang nói đến.

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

chủ sở hữu phần của github nói,

Thật không may những gì bạn muốn làm là không dễ dàng đạt được vào lúc này, mặc dù nó sẽ được tốt đẹp. Chúng tôi hiện đang lên kế hoạch cho việc viết lại mô-đun này, vì vậy, chúng tôi sẽ xem liệu chúng tôi có thể tìm ra cách để làm điều này. Here

Answer 1

Bạn không thể áp dụng Vue trong bản dựng trước trong bản mẫu, kể từ dropzone trong nội bộ điều khiển DOM. Nhưng bạn có thể ... Trong mounted móc của bạn:

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

Bây giờ file là phản ứng và bạn có thể sử dụng chúng với v-for trong mẫu của bạn:

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

Bạn có thể sử dụng các sự kiện dropZone khác để ràng buộc thông tin bổ sung với dữ liệu phản hồi của bạn mà bạn có thể sử dụng trong mẫu.