javascript - 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: "",
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>
解决方案
当您实例化 Dropzone 类时,它会自动查找要在 dropzones 中转换的元素(默认情况下,具有.dropzone
该类的元素)。
看起来您想要动态添加作为 dropzones 的元素。然后你需要自己触发 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。
请参阅有关以编程方式创建拖放区的文档
推荐阅读
- python - 如何在python中向现有字典添加新值
- node.js - 如何在开发模式应用程序中禁止共享 aws 凭据
- reactjs - 使用 mount 和 React 的上下文 API 进行玩笑测试
- r - 如何用 dcast “填充”变量
- java - Spinner 选择的值未上传到 firebase 数据库
- javascript - 页面刷新量后替换元素
- python - 选择列名中具有相同数字的两个 pandas 列
- typescript - Jest 真的需要像 Babel 这样的预处理器来为我的打字稿项目工作吗?
- r - 栅格与道路系统沿线点的距离?
- python-3.x - 用于制作 sting 数据库