时间戳

首页 > 解决方案 > vuejs 有效负载仅发出数组中的第一个元素

vue.js - vuejs 有效负载仅发出数组中的第一个元素

问题描述

我使用带有 vuejs 的 dropzone 插件，并且来自 dropzone 的响应是一个数组。有效负载具有参数数组、响应和文件对象。每次我调用@vdropzone-success="$emit('processFunction',$event)它都会正确地将请求发送到正确的函数，但只返回有效负载数组的第一个元素。为什么？我附上了 vue 调试器的屏幕截图以帮助说明问题。如何访问 processFunction 中的有效负载以获取数组元素 0 和 1？vue 调试器的图片，您可以在其中看到数组有效负载。 $emit 函数只传递第一个元素

添加更多上下文。这是库中向我的子组件发出的函数

    this.dropzone.on("success", function(file, response) {
  vm.$emit("vdropzone-success", file, response);
});

在我的 vue 代码中之后，我将此结果发送到我的索引组件：

      <vue-dropzone
        id="dropzone"
        ref="myVueDropzone"
        @vdropzone-drop="$emit('loading')"
        @vdropzone-success="$emit('loaded',...$event)"
        :use-custom-slot="true"
        :options="dropzoneOptions"
      >

我在这里绑定到我的 index.vue 上的元素：

 <Upload  @loading="loading" @loaded="loaded" />

然后调用加载的函数

loaded(e) {
  console.log(e);
  this.notLoading = true;
  this.isLoading = false;
},

https://github.com/vuejs/vue/issues/5527 这看起来像一个类似的问题。每当我调用 $event 它只返回 0 这是文件。我希望它返回 1，这是来自服务（对象）的响应。

标签： vue.jsdropzone

解决方案

好的..我觉得应该有更好的方法来做到这一点，但是...看起来我无法通过库->子->父的vue标签直接传递数组变量。相反，我需要在子节点的 js 中将数组拉出，然后在 js 中将其重新发送给父节点。以下解决方案有效。

图书馆：

  this.dropzone.on("success", function(file, response) {

vm.$emit("vdropzone-success", file, response); });

孩子（helper.vue）：

          <!-- file upload -->
      <vue-dropzone
        id="dropzone"
        ref="myVueDropzone"
        @vdropzone-drop="$emit('loading')"
        @vdropzone-success="processdata"
        :use-custom-slot="true"
        :options="dropzoneOptions"
      >

以及其中的js部分

methods: {
processdata(...ev){
  this.$emit("loaded",ev);
},

最后是父级（index.vue）

<Upload  @loading="loading" @loaded="loaded" />

以及为此的js

loaded(...e) {
  this.storedValue = e;

不是最优雅的解决方案，但它正在工作！

推荐阅读