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

下面有一个片段，基本上是我的整个代码块，它创建了一个div，当你点击“添加另一个区域”时，它将克隆这个div。这允许用户输入多行信息，每行都有自己的结果和图像

问题是，由于我的卡设置，我成功地克隆了所有具有自己独特身份的东西。但是，dropzone没有复制。第一个文件dropzone表单可以很好地工作，但是当我克隆div并在页面上有2个或更多dropzone insinstance时，它们就不工作了（它们不显示上传图像文本或任何内容）

如何将相同的逻辑成功应用于dropzone实例

newvue({
组件：{}，
el:#commonNameDiv“，
数据（）{
返回{
搜索字符串：['']，
结果：[]，
savedAttributes:[]，
卡片：[]，
显示列表：错误，
区域编号：[]，
imageZoneNames:[]}
},
方法：{
自动完成（ev、卡）{
这个结果=[]；
console.log（this.searchString）；
如果（ev.target.value.length>2）{
获取（“/product/parts/components/search”{
参数：{
searchString:ev.target.value
}
})。然后（响应=>{
card.results=response.data；
this.showList=true；
console.log（this.results）；
console.log（this.searchString）；
});
}
},
保存属性（结果、卡片）{
card.value=result.attribute\u值；
card.results=[]；
card.zone=this.zoneumber；
this.showList=false；
},
addCard:function（）{
这个。卡。推({
索引：“”，
值：“”，
区域编号：“，
结果：[]，
组件图像：“
});
console.log（此.cards）；
},
hideDropdown（）{
this.showList=false；
},
},
创建（）{
这个.addCard（）；
让实例=这个；
Dropzone.options={
最大文件大小：12，
重命名文件：函数（文件）{
var dt=新日期（）；
var time=dt.getTime（）；
返回时间+file.name；
},
接受的文件：“.jpeg、.jpg、.png、.gif”，
addRemoveLinks：是的，
超时：50000，
removedfile:函数（文件）{
log（file.upload.filename）；
var name=file.upload.filename；
var fileRef；
return（fileRef=file.previewElement）！=null？
fileRef.parentNode.removeChild（file.previewElement）：无效0；
},
init:function（）{
此.on（“addedfile”，
函数（文件）{
push（{name:file.upload.filename，desc:'linedrawing'}）；
console.log（文件）；
log（instance.imageZoneNames）；
});
}
};
}
})

@{{result.attribute_value}}


添加另一个区域

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

如果您尝试插入：

created() {

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

    Dropzone.options.myDropzone = {

---

甚至可以将选项添加到

addCard

方法，或者设置

setupDropzones

方法并将其添加到

addCard

方法。

当您实例化Dropzone类时，它会自动查找要在dropzones中转换的元素（默认情况下，使用

.Dropzone

类的元素）

看起来您希望动态添加属于DropZone的元素。然后您需要自己触发dropzone转换

我建议您禁用

autoDiscover

选项，并手动指定要转换为dropzones的每个元素：

addCard（）{
这个。卡。推({
...
});
设cardIndex=this.cards.length-1；
//等待元素#dropzone-X存在于DOM中
Vue.nextTick（函数（）{
新Dropzone（“Dropzone-”+cardIndex{
...
});
});
},
创建（）{
...
Dropzone.autoDiscover=false
//没有新的Dropzone（）
...
//启动设置
这个.addCard（）；
},

工作

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

见