Почему переменные из тела Vue остаются пустыми после fetch запроса?

Question

[Дмитрий Баскаков]

После запроса на API, идет ответ с json данными, содержащий как минимум массив с со статусом запроса и примечанием. Но после запроса данные не сохраняются в переменную из тела Vue

Вот код

new Vue({
        el: '#app',
        data: function () {
            return {
                firstChildSetting: {},
                secondChildSetting: {},
                firstChild: 'none',
                secondChild: 'none',
                currentSetting: {},
                client: 'none',
                formType: 'none',
                errorMessage: '',
                lastRequestResult: null,
            }
        },
        methods: {
            firstChildOnChange: function () {
                this.formSettingRequest(this.firstChild, 1);
            },
            secondChildOnChange: function () {
                this.formSettingRequest(this.secondChild, 2);

            },
            formTypeOnChange: function () {
                this.formSettingRequest(this.formType);
            },
            formSettingRequest: function (formType, childrenCount = 0) {
                fetch('http://site.name/api/v1/getFormConfig?type=' + encodeURIComponent(formType))
                    .then((response) => {
                        if (response.ok) {
                            return response.json();
                        } else {
                            throw new Error('Network response was not ok');
                        }
                    })
                    .then((response) => {
                        if (childrenCount === 2) {
                            this.firstChildSetting = response.data;
                        } else if (childrenCount === 1) {
                            this.secondChildSetting = response.data;
                        } else {
                            this.currentSetting = response.data;
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            clientOnChange: function () {

            }
        }
    });

Comments

[Алексей Ярков]

А сделайте песочницу с примером. Не совсем ясно какой код не работает. Во втором then не присваиваются значения? А что в response туда приходит? Выводили в консоль?

[Дмитрий Баскаков]

Алексей Ярков, там очень много кода, не уверен что возможно всё то же воссоздать в песочнице

Если поможет, то в response приходит json в формате:

{
 "status": bool,
 "message": string
 "data": {
    "name": array
    "availableFields": array
    "availableOptions": array
  }
}

[Алексей Ярков]

Дмитрий Баскаков, перед if (childrenCount === 2) { сделайте console.log(response); и покажите

[Дмитрий Баскаков]

{status: true, message: "", data: {…}}

status: true
message: ""
data:
  name: (...)
  availableFields: (...)
  availableOptions: (...)
__ob__: we {value: {…}, dep: ce, vmCount: 0}
get name: ƒ ()
set name: ƒ (t)
get availableFields: ƒ ()
set availableFields: ƒ (t)
get availableOptions: ƒ ()
set availableOptions: ƒ (t)
__proto__: Object
__proto__: Object

Answer 1

[Aetae]

Всё работает: https://codesandbox.io/s/condescending-snow-feqp6

Comments

[Дмитрий Баскаков]

Если бы у меня работало, я бы вопрос не задавал

[Aetae]

Дмитрий Баскаков, вы по ссылке прошли?
Конкретный код, без изменений - работает.
Применяем капельку элементарной логики и приходим к выводу: проблема не в коде, а в чём-то ещё.
Возможно в сервере, возможно в других местах кода, которые вы нам не показали.

[Дмитрий Баскаков]

Aetae, Переходил. Проблема решилась сама собой когда я переписал код несколько раз, вернувшись к изначальному варианту.

В чем именно проблема и был вопрос. Не всегда код написан неправильно, иногда бывают старые версии библиотек, некорректные настройки сервера и прочее. На этот форум я захожу как раз, чтобы найти ответ у людей с большим опытом, чем у меня, у которых взгляд на вещи пошире моих. А скопировать и вставить код в песочницу я и сам могу