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

Question

这里的一切在技术上都正常工作，但我有一个明显的问题：当我将图像添加到我的 Dropzone 实例时，我希望它将该图像的文件名添加到我的 cards imageInfo.

下的数组

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

具体来说，我在这里需要弄清楚的是如何使用来自 Dropzone 的 file 以及循环中的 card 调用我的 imageChange 函数。

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

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: "",
              results: [],
              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();

       }
    })

<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" v-on-clickaway="hideDropdown" 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 v-on:change="imageChange(card)" method="post" action="{{url('product/parts/upload/store')}}" enctype="multipart/form-data"
                          class="dropzone" v-bind:id="'dropzone-'+i" v-model="card.imageInfo">
                    </form>
                </div>
            </div>

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

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

Answer 1

addCard 方法已经可以访问正在添加到 this.cards 的 card 实例，因此您可以将 card 传递给 [=15] 的回调=] 事件。例如，您可以将 filename 道具添加到 card 实例，然后 addedfile 回调可以使用来自 file 事件参数的信息更新该道具：

export default {
  methods: {
    addCard() {
      //...

      const card = {
        //...
        filename: '',
      }
      this.cards.push(card)

      new Dropzone('#dropzone', {
        init() {
          this.on('addedfile', file => {
            card.filename = file.upload.filename
          })
        }
      })
    }
  }
}

codepen

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

passing index and calling a function through dropzone.js

javascript

vue.js

vuejs2

dropzone