полезная нагрузка vuejs выдает только первый элемент в массиве

#vue.js #dropzone

Вопрос:

я использую плагин dropzone с vuejs, и ответ от dropzone представляет собой массив. Полезная нагрузка содержит массив аргументов, ответ и объект file. Каждый раз, когда я вызываю @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"
      >
 

Я привязываюсь к элементу в моем индексе.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, который является ответом от подачи (объекта).

Комментарии:

1. что происходит, когда вы используете оператор распространения с одним аргументом?

2. по — прежнему возвращает только первый элемент массива.

Ответ №1:

хорошо.. Я чувствую, что должен быть лучший способ сделать это, но… похоже, я не могу передать переменную массива через теги vue из библиотеки->дочерний->>родительский напрямую. Вместо этого мне нужно вытащить массив в js в дочернем файле и повторно передать его в js родительскому. нижеприведенное решение сработало.

библиотека:

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

vm.$emit(«vdropzone-успех», файл, ответ);
});

ребенок (помощник.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;
 

не самое элегантное решение, но оно работает!

Ответ №2:

Вы можете попробовать это:

Ребенок

 @vdropzone-success="$emit('loaded')"
 

Родитель

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

loaded(payload) {
 this.storedValue = payload;
}
 

Комментарии:

1. они находятся в отдельных файлах (отношения между ребенком и родителем), поэтому это не сработает.