vue ref$ 未定义（在子 vue2-dropzone 中）答案

【问题标题】：vue ref$ undefined (in child vue2-dropzone)vue ref$ 未定义（在子 vue2-dropzone 中）
【发布时间】：2020-11-13 06:51:36
【问题描述】：

我有这个模板

<VueDropzone
      id="drop1"
      ref="dropzoneBlock"
      :options="dropOptions"
    ></VueDropzone>

    <button class="drop__button" @click="onSubmitFiles">send</button>

这个脚本在方法中

onSubmitFiles(){
     console.log(this.$refs.dropzoneBlock.processQueue()); 
 },

在dropzone选项中

dropOptions: {
        url: "https://httpbin.org/post",
        maxFilesize: 10, // MB
        maxFiles: 20,
        chunking: true,
        chunkSize: 500, // Bytes
        thumbnailWidth: 200, // px
        thumbnailHeight: 150,
        addRemoveLinks: true,
        acceptedFiles: "image/jpeg,image/png,image/jpg",
        autoProcessQueue: false,
        
      }

所以当我尝试发送时，控制台给我“未定义”

但如果我将代码更改为

onSubmitFiles(){
     console.log(this.$refs.dropzoneBlock); 
 }

控制台给我一个对象。如果我检查对象，我会看到方法 'processQueue()'

我尝试了互联网上的一切

/ nextTick 
/ timeOut
/ I don't have v-if or v-show on page (only in package from plugin, component have v-if on slot) 
/ this.$refs.dropzoneBlock.dropzone.processQueue()

如果我现在也可以选择

autoProcessQueue: true

那没用。但是放置区中的一切工作正常，但我不能只是将文件发送到服务器

请帮忙

【问题讨论】：

标签： vue.js dropzone

【解决方案1】：

如果您的方法this.$refs.dropzoneBlock.processQueue() 什么都不返回，那么您将在控制台中获得undefined。尝试从processQueue() 返回一些东西，或者只是在你的processQueue() 方法中调用console.log('processQueue() called')。

UPD。也许这会有所帮助：

这应该在文档中。在主 Vue 中 this.$refs.fileUploadZone.processQueue();在模板中 this.$refs.fileUploadZone.dropzone.processQueue();

从这里https://github.com/rowanwins/vue-dropzone/issues/54#issuecomment-317559860

所以，尝试使用

this.$refs.dropzoneBlock.dropzone.processQueue()

而不是this.$refs.dropzoneBlock.processQueue()。

【讨论】：