Vue配合dropzone使用$emit仅返回数组首元素，如何获取全部参数

Vue的v-on指令中直接使用$event变量时，仅会捕获事件触发时传递的第一个参数，vdropzone-success事件默认传递file、response两个参数，因此你仅能拿到下标为0的file对象，无法直接获取下标为1的服务端响应。

方案1：显式传递两个参数（推荐） #

1. 修改Upload组件中vue-dropzone的事件绑定代码：

<vue-dropzone
  id="dropzone"
  ref="myVueDropzone"
  @vdropzone-drop="$emit('loading')"
  <!-- 替换原来的vdropzone-success绑定 -->
  @vdropzone-success="(file, response) => $emit('loaded', file, response)"
  :use-custom-slot="true"
  :options="dropzoneOptions"
>

2. 修改index.vue中loaded函数的参数接收逻辑：

loaded(file, response) {
  // 下标0对应的文件对象
  console.log('文件对象：', file);
  // 下标1对应的服务端返回结果
  console.log('服务端响应：', response);
  this.notLoading = true;
  this.isLoading = false;
},

方案2：打包为数组传递 #

如果需要保持参数为单个数组格式，可以按如下方式修改：

1. 修改Upload组件中vue-dropzone的事件绑定代码：

@vdropzone-success="(...args) => $emit('loaded', args)"

2. 在loaded函数中通过下标取值即可：

loaded(e) {
  // 下标0对应file对象
  console.log('文件对象：', e[0]);
  // 下标1对应服务端响应结果
  console.log('服务端响应：', e[1]);
  this.notLoading = true;
  this.isLoading = false;
},

内容的提问来源于stack exchange，提问作者Sam