Я возвращаю CSV-загрузку со своего сервера следующим образом:
$headers = ['Content-Type' => 'application/csv'];
return response()->download($filepath, $filename, $headers)->deleteFileAfterSend(true);
Это на самом деле работает и загружается в браузер так, как я хочу.
Проблема в том, что я пытаюсь изменить класс на кнопке с значка загрузки на значок вращения и обратно на исходный значок загрузки после успешного возврата ответа от серверной части - я пытаюсьэто в моей функции .then
в vue:
Значок в кнопке с указанным классом, на который я пытаюсь повлиять, в разделе <template>
моего Vue:
<button @click="formSubmit($event)"<i id="loadSpinner" class='zmdi zmdi-download' :class="spin"></i></button>
VueАтрибут data связан с переменной «spin», которая содержит имя класса:
export default {
data() {
return {
spin: ''
selected: ''
}
}
Методы, содержащие метод formSubmit
и последующую логику:
formSubmit(e) {
let currentObj = this;
currentObj.spin = 'zmdi zmdi-rotate-right zmdi-hc-spin';
if(this.selected.length > 0){
axios.post('/commercial', {
responseType: 'blob',
ratecard: currentObj.selected
}).then(function (response) {
currentObj.spin = 'zmdi zmdi-download';
console.log(response);
}).catch(function (error) {
currentObj.output = error;
console.log(currentObj.output);
});
}else {
currentObj.spin = 'zmdi zmdi-download';
swal({
type: 'error',
title: 'Oops...',
text: 'Please select an account reference'
});
e.preventDefault(); //to prevent white-page issue and page refresh
}
}
Ответ представляет собой BLOB-объект, поэтомузначение selected
отправляется с помощью штрафа, а ответ - с точки зрения требуемой функциональности, т.е. возвращает загрузку CSV в браузер пользователей. Однако там, где я пытаюсь изменить класс «spin», кажется, что это работает только в Chrome - даже тогда console.log(response.data)
не появляется в моей консоли даже в Chrome - это как если бы эта функция была частично введена (если это дажевещь) или не вводится вообще, как, по-видимому, в случае с Firefox / Safari.
Первоначальное изменение класса на значок «spin» работает - это изменение назад, которое не работает.
Я попробовал чистую попытку javascript, также используя document.getElementsbyID и пытаясь воздействовать на класс, используя атрибут .className напрямую, и то же самое можно сказать, используя JQuery
Если кто-нибудь может указать мне правильное направление, это будет оченьпризнателен - я готов предоставить дополнительную информацию, если потребуется.
Я не могу выяснить / изолировать, если это проблема конкретного браузера или проблема с Vue / Laravel.
Спасибо.