#vue.js #dropzone
Вопрос:
я использую плагин dropzone с vuejs, и ответ от dropzone представляет собой массив. Полезная нагрузка содержит массив аргументов, ответ и объект file. Каждый раз, когда я вызываю @vdropzone-success="$emit('processFunction',$event)
его, он правильно отправляет запрос нужной функции, но возвращается только первый элемент массива полезной нагрузки. Почему? Я прикрепил скриншот отладчика vue, чтобы проиллюстрировать проблему. Как я могу получить доступ к полезной нагрузке в функции ProcessFunction, чтобы добраться до элементов массива 0 и 1?
чтобы добавить больше контекста. Это функция в библиотеке, которая передается в мой дочерний компонент
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. они находятся в отдельных файлах (отношения между ребенком и родителем), поэтому это не сработает.