Доступ к значениям props внутри локального компонента vuejs

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

Это код

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;
                    //here the logs are returinig undefined
                    //but it is having values in the data from the root Instance
                    console.log(_this.$props.currentModuleFormID);
                    console.log(_this.currentModuleFormID);

                    axios
                        .get('http://localhost:3000/getFormData',{
                            params: {
                                formID: _this.currentModuleFormID + 'a'
                            }
                        })
                        .then(function(response){

                            console.log(response);

                        })
                }

            }

        }
    },

})

Это HTML-использование компонента

<div class="row" id="custom-erp-widgets" v-show="showContainerHeader">

    <custom-erp-header :current-module-name='currentModuleName'></custom-erp-header>    
    <custom-erp-body></custom-erp-body>

</div>

Как я могу получить доступ к значениям props в функции локального компонента?

Ouptput

Попробовать this.props?

Madison Courto 26.10.2018 05:39

Я могу получить доступ к реквизитам, проблема в том, что значение не определено. formID внутри axios не определен.

Rehan 26.10.2018 06:14

Можете ли вы показать код шаблона html, в котором вы используете custom-erp-body?

ittus 26.10.2018 07:01

Пожалуйста, проверьте сейчас, я обновил HTML в вопросе @ittus

Rehan 26.10.2018 07:11
4
4
1 091
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Похоже, проблема в вашем имена реквизитов, потому что Vue ожидает, что ваши имена пропов будут в форме шашлыка в шаблонах DOM.

HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents.

Таким образом, для currentModuleFormID он ожидает current-module-form-i-d в шаблоне DOM, а не current-module-form-id, как вы ожидали. Попробуйте заменить currentModuleFormID на currentModuleFormId с нижним регистром d в конце и используйте current-module-form-id в шаблоне, и я предполагаю, что это должно сработать.

var custom_erp_widget = new Vue({
    el : '#custom-erp-widgets',
    data : {
        showContainerHeader : false,
        currentModuleName : 'foo',
        currentModuleFormId : '5',
        currentModuleReportId : '6'
    },
  ....

<custom-erp-body 
  :current-module-form-id="currentModuleFormId" 
  :current-module-report-id ="currentModuleReportId">
</custom-erp-body>

Спасибо, отличный улов @Husam, спасибо за помощь. Но по какой-то причине я не могу получить доступ к значениям внутри параметров axios. Вы знаете причину этого?

Rehan 26.10.2018 08:56

@Rehan Рад помочь. Не могли бы вы уточнить Re: axios? Было бы лучше, если бы вы могли обновить свой вопрос.

Husam Ibrahim 26.10.2018 09:00

Я открою новый вопрос и сделаю ссылку на него здесь.

Rehan 26.10.2018 09:02
stackoverflow.com/questions/53003261/… @Husam
Rehan 26.10.2018 09:06

Вы должны передать props компоненту custom-erp-body:

<custom-erp-body 
  :currentModuleFormID="currentModuleFormID" 
  :currentModuleReportID ="currentModuleReportID">
</custom-erp-body>

Я тоже пробовал это, но все равно не определено.

Rehan 26.10.2018 07:24

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