Dropzone实例适用于第一个元素，但不适用于克隆的元素Vue

如何解决Dropzone实例适用于第一个元素，但不适用于克隆的元素Vue

我下面有一个代码段，这基本上是我的整个代码块，并且实际上它创建了一个div，当您单击“添加另一个区域”时，它将克隆该div。这样，用户可以输入多行信息，每行都有自己的结果和图像。

问题在于，借助卡的设置，我可以成功克隆具有自己唯一身份的所有内容。但是，dropzone不会复制。第一个文件dropzone形式可以正常工作，但是当我克隆div并在页面上有2个或更多dropzone实例时，它们将不起作用（它们不会显示上传图像文本或其他内容）

如何在此处将我的逻辑成功应用于dropzone实例？

new Vue({
          components: {},el: "#commonNameDiv",data() {
            return {
              searchString: [''],results: [],savedAttributes: [],cards: [],showList: false,zoneNumber:[],imageZoneNames: []            }
          },methods: {
            autoComplete(ev,card) {
              this.results = [];
              console.log(this.searchString);
              if (ev.target.value.length > 2) {
                axios.get('/product/parts/components/search',{
                  params: {
                    searchString: ev.target.value
                  }
                }).then(response => {
                  card.results = response.data;
                  this.showList = true;
                  console.log(this.results);
                  console.log(this.searchString);
                });
              }
            },saveAttribute(result,card) {
              card.value = result.attribute_value;
              card.results = [];
              card.zone = this.zoneNumber;
              this.showList = false;
            },addCard: function() {
                this.cards.push({
                  index: "",value: "",zoneNumber: "",componentImage:""
                });

                console.log(this.cards);
            },hideDropdown() {
              this.showList = false;
            },},created() {

                this.addCard();

                let instance = this;

                Dropzone.options = {
                    maxFilesize: 12,renameFile: function (file) {
                        var dt = new Date();
                        var time = dt.getTime();
                        return time + file.name;
                    },acceptedFiles: ".jpeg,.jpg,.png,.gif",addRemoveLinks: true,timeout: 50000,removedfile: function (file) {
                        console.log(file.upload.filename);
                        var name = file.upload.filename;

                        var fileRef;
                        return (fileRef = file.previewElement) != null ?
                            fileRef.parentNode.removeChild(file.previewElement) : void 0;

                    },init: function() {
                        this.on("addedfile",function(file) { 
                            instance.imageZoneNames.push({name: file.upload.filename,desc: 'Line Drawing'});
                            console.log(file);
                            console.log(instance.imageZoneNames);
                        });
                    }
                };
                }
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>


<div id="commonNameDiv">
<div class="uk-grid" v-for="(card,i) in cards" :key="i">
                    <div class="uk-width-1-10"  >
                        <input v-model=" card.zoneNumber" size="4" type="text" name="mapNumber">
                    </div>
                    <div class="uk-width-6-10">
                        <input
                          style="width:100%"
                          placeholder="what are you looking for?"
                          v-model="card.value"
                          v-on:keyup="autoComplete($event,card)"
                        >
                        <div v-if="showList"  class="panel-footer componentList" v-if="card.results.length">
                          <ul>
                            <li  v-for="(result,i) in card.results" :key="i">
                              <a v-on:click="saveAttribute(result,card)">@{{ result.attribute_value }}</a>
                            </li>
                          </ul>
                        </div>
                    </div>
                    <div class="uk-width-3-10">
                        <form method="post" action="{{url('product/parts/upload/store')}}" enctype="multipart/form-data"
                              class="dropzone">
                        </form>
                    </div>
                </div>

  <div style="height: 35px;">

  </div>

<div>
                    <a v-on:click="addCard">Add another zone</a>
                </div>
</div>

解决方法

实例化Dropzone类时，它将自动查找要在dropzone中转换的元素（默认情况下，具有.dropzone类的元素）。

您似乎想动态添加属于dropzone的元素。然后，您需要自己触发dropzone转换。

我建议您禁用autoDiscover选项，并手动指定要转换为放置区的每个元素：

addCard() {
    this.cards.push({
    ...
    });
    let cardIndex = this.cards.length - 1;

    // Waiting for the element #dropzone-X to exist in DOM
    Vue.nextTick(function () {
        new Dropzone("#dropzone-"+cardIndex,{
           ...
        });
    });
},created() {
    ...
    Dropzone.autoDiscover = false
    // no new Dropzone()
    ...

    // Starting setup
    this.addCard();
},

<form ... class="dropzone" v-bind:id="'dropzone-'+i">

工作jsbin

有几种方法可以选择要转换的元素（$ refs，id，类），这里我建议使用id。

请参见doc on programmatically creating dropzones

,

实际上是在创建它，但没有重建Dropzone。 我认为您必须创建一个Dropzone的新实例。

如果您尝试插入：

created() {

    this.addCard();
    var myDropzone = new Dropzone('.dropzone')
    let instance = this;

    Dropzone.options.myDropzone = {

甚至将选项添加到addCard方法中，或设置setupDropzones方法并将其添加到addCard方法中。