通过dropzone.js传递索引并调用函数

如何解决通过dropzone.js传递索引并调用函数

从技术上讲，这里的一切都可以正常工作，但是我有一个明显的问题：将图像添加到我的Dropzone实例时，我希望它将该图像的文件名添加到我的union数组下cards。

但是我不知道如何通过Dropzone调用独立函数。

具体地说，我需要在这里弄清楚的是，如何使用Dropzone中的imageInfo和imageChange调用我的file函数，因为它在循环中。

如何在添加图像时使用两个属性调用该函数？

card

new Vue({
      mixins: [VueClickaway.mixin],components: {},el: "#commonNameDiv",data() {
        return {
          searchString: [''],results: [],savedAttributes: [],cards: [],showList: false,zoneNumber:[],imageZoneNames: [],imageInfo: [] 
        }           
      },methods: {
        imageChange(file){
            console.log('it worked');
        },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:"",imageInfo: ""
            });
            
             // Index of the last card pushed
            let cardIndex = this.cards.length - 1;
            let instance = this; // $vm
            Vue.nextTick(function () {
              new Dropzone("#dropzone-"+cardIndex,{
                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});
                        console.log(file);
                        console.log(instance.imageZoneNames);

                    });
                }
            });
            });

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

        let instance = this;

        Dropzone.autoDiscover = false;
      

        this.addCard();

       }
    })

解决方法

addCard方法已经可以访问添加到card的{​​{1}}实例，因此您可以将this.cards传递到card的回调中事件。例如，您可以向addedfile实例添加一个filename道具，然后card回调可以使用来自addedfile事件参数的信息来更新该道具：

file

codepen