Axios публикует. Затем функциональность запускается в Chrome, но не в Firefox / Safari и т. Д. - PullRequest
0 голосов
/ 15 октября 2019

Я возвращаю 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.

Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...