Значение реквизита не обновляется внутри axios

У меня есть экземпляр Vue с двумя локальными components, когда я пытаюсь получить некоторые данные с сервера, используя axios, props, потому что он пуст, когда пытаюсь передать его в параметрах GET

var custom_erp_widget = new Vue({
    el : '#custom-erp-widgets',
    data : {
        showContainerHeader : false,
        currentModuleName : 'foo',
        currentModuleFormID : '5',
        currentModuleReportID : '6'
    },
    components : {
        'custom-erp-header' : {
            template : '<div class="col-12" id="custom-erp-widget-header">'+
                        '{{ currentModuleName.toUpperCase() }}'+
                       '</div>',
            props : ['currentModuleName']
        },
        'custom-erp-body' : {
            template : '<div class="col-12" id="custom-erp-widget-body">'+
                       '</div>',
            props : ['currentModuleFormId','currentModuleReportId'],
            // for emitting events so that the child components
            // like (header/body) can catch and act accordingly
            created() {
                var _this = this;
                eventHub.$on('getFormData', function(e) {
                    if(e == 'report'){
                        console.log(_this.$props);

                        _this.getReportData();
                    }
                    else if(e == 'form'){
                        console.log(_this.$props);
                        _this.getFormData();
                    }

                });

              },

            methods : {
                // function to get the form data from the server
                // for the requested form
                getFormData : function(){
                    var _this = this;
                    var x = _this.$props;
                    // here the props are having values
                    //currentModuleFormId: 1
                    //currentModuleReportId: 0
                    console.log(x);

                    axios
                        .get('http://localhost:3000/getFormData',{
                            params: {
                                //here both are '' in the server-side
                                formID: JSON.stringify(_this.$props) + 'a'
                            }
                        })
                        .then(function(response){

                            console.log(response);

                        })
                }

            }

        }
    },

})

Это собственно блок

getFormData : function(){

    var _this = this;
    var x = _this.$props.currentModuleFormId;
    console.log(x);
    let urs = 'http://localhost:3000/getFormData?formID='+_this.$props.currentModuleFormId.toString();
    axios
        .get(urs , {
            params: {
              formID: _this.$props.currentModuleFormId
            }
        })
        .then(function(response){

            console.log(response);

        })
}

Вкладка «Вывод в сети»

enter image description here

Какое ожидаемое значение в поле formID?

Husam Ibrahim 26.10.2018 09:21

Значения реквизита {currentModuleFormId: 1,currentModuleReportId: 0}

Rehan 26.10.2018 09:23

Попробуйте console.log JSON.stringify(_this.$props) + 'a' перед вызовом axios и посмотрите, получите ли вы ожидаемое значение.

Husam Ibrahim 26.10.2018 09:29

Да, это работает правильно, но когда я делаю _this. $ Props.currentModuleFormId, эта вещь пуста. Как получить доступ к значениям реквизита? Есть ли другой способ сделать это? \

Rehan 26.10.2018 09:32

В своем комментарии вы говорите, что он имеет значение 1. В любом случае вы можете получить к нему доступ с помощью _this.$props.currentModuleFormId или _this.$props['currentModuleFormId'].

Husam Ibrahim 26.10.2018 09:35

Я добавил снимок экрана и блок, проверьте @HusamIbrahim. Даже когда я пытаюсь получить доступ таким образом, он все еще находится на стороне сервера.

Rehan 26.10.2018 10:47

Что вы получите от этого console.log(x). Вы также пробовали настроить formId на x?

Husam Ibrahim 26.10.2018 14:43

Я только что обнаружил, что только в первый раз реквизиты имеют старые значения, со второго раза реквизиты ведут себя так, как ожидалось. Я меняю data в корневом элементе, а затем вызываю axios, так что значения props также должны быть обновлены, верно?

Rehan 26.10.2018 14:45

Также, пожалуйста, рассмотрите возможность публикации всего соответствующего кода, включая шаблоны, чтобы я мог попытаться воспроизвести его. Бонусные баллы, если вы потратите время на создание jsfidfle / codepen / codesandbox, чтобы мы могли поиграть с вашим кодом и посмотреть, что не так.

Husam Ibrahim 26.10.2018 14:50

Да, это правильно. Если все настроено правильно, при изменении данных в родительском компоненте реквизиты должны обновиться.

Husam Ibrahim 26.10.2018 14:54
0
10
204
0

Другие вопросы по теме