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

Question

我在下面有一个 sn-p，它基本上是我此时的整个代码块，本质上它创建了一个 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: "",
                  results: [],
                  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>

Answer 1

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

您似乎想要动态添加作为放置区的元素。然后你需要自己触发 dropzone 转换。

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

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、ids、classes），这里我建议使用 ids。

见doc on programmatically creating dropzones

Answer 2

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

如果您尝试插入：

created() {

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

    Dropzone.options.myDropzone = {

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