VueJS: передача объекта в компонент как prop - проходит как null

Question

У меня проблема ниже, когда я передаю объект в компонент в качестве реквизита, когда я console.log проп в компоненте, он возвращает ноль. Когда я консоль регистрирую объект в родительском (корне), который передает объект, это допустимо.

Может кто-нибудь определить какие-либо проблемы или что-то я делаю не так?

Моя интуиция говорит мне, что компонент сведений о транспортном средстве регистрирует vehicle_details до того, как root получит данные. Разве я не должен использовать смонтированный для этого или я должен использовать другой подход?

Спасибо.

index.html - см. Детали автомобиля

<div id="app">

    <form-wizard color="#64c5b1" error-color="#fee5e6" ref="wizard" title="" subtitle="" v-cloak>

        <tab-content title="Dealer Details" icon="mdi mdi-account-check" :before-change="() => validate('DealerDetails')" :before-change="beforeTabSwitch">

            <div class="card-box ribbon-box">
                <div class="ribbon ribbon-custom">
                    Dealer Details
                </div>

                <dealer-details ref="DealerDetails" @on-validate="onStepValidate"></dealer-details>

            </div>

        </tab-content>

        <tab-content title="Vehicle Details" icon="mdi mdi-car-wash" :before-change="() => validate('VehicleDetails')">

            <div class="card-box ribbon-box">
                <div class="ribbon ribbon-custom">
                    Vehicle Details
                </div>

                <!-- Object below is valid, data is expected -->
                {{vehicle_details}}
                <!--  Passing through vehicle_details object to component, comes through as null on the other end -->
                <vehicle-details ref="VehicleDetails" @on-validate="onStepValidate" v-bind:vehicle_details="vehicle_details"></vehicle-details>

            </div>

        </tab-content>

    </form-wizard>

</div>

root - см. Смонтированный раздел, в котором извлекаются vehicle_details

import DealerDetails from '/vuejs/DealerDetails.js'
import VehicleDetails from '/vuejs/VehicleDetails.js'

Vue.use(VueFormWizard);

new Vue({
    el:'#app',
    data() {
        return {
            vehicle_details: null
        };
    },
    components: {
        DealerDetails,
        VehicleDetails
    },
    methods: {
        validate(ref) {
            return this.$refs[ref].validate();
        },
        onStepValidate(validated, model) {
            if (validated) {
                this.finalModel = { ...this.finalModel, ...model };
            }
        }
    },
    mounted: function() {
        let self = this;

        var page_url = window.location.pathname;
        var job_id = page_url.split("/")[4];
        if(job_id != null) {
            $.get('myurl/' + job_id, function(data) {

                data = $.parseJSON(data);

                self.vehicle_details = {
                    vehicle_model_id: data.jobDetails.vehicle_model_id
                };

                // Object below is valid, data is expected
                console.log(self.vehicle_details);

            });
        }
    }
});

компонент сведений о транспортном средстве - см. Смонтированный раздел, где ведение журнала vehicle_details - возвращает ноль

import Bus from '/vuejs/Bus.js'

export default {
    name: 'vehicle-details',
    props: {
        vehicle_details: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            vehicle_model: null
        };
    },
    mounted: function() {
        // Below logs null 
        console.log(this.vehicle_details);
    },
    methods: {
        validate() {
            // todo: validation
            this.error = false;
            return true;
        }
    },
    watch: {
        // Emit vehicle model changes so other components can access it
        vehicle_model: function() {
            Bus.$emit('vehicle-model', this.vehicle_model);
        }
    },
    template: `
             <div class="col-xs-12">

                <p>
                    <h5 class="card-title">Please provide details for the effected vehicle</h5>
                </p>

                <hr/>

                <div class="form-group row">
                    <label class="col-2 col-form-label">Vehicle Model</label>
                    <div class="col-10">
                        <input type="text" v-model="vehicle_model" class="form-control">
                    </div>
                </div>

             </div>
  `,
};

Answer 1

Ваши данные равны нулю при создании, и они передаются в свойство дочернего компонента, когда mounted.

Только после того, как асинхронный вызов вернется, элемент будет установлен. В это время будут обновляться только реактивные слушатели. mounted уже был вызван и больше не будет вызываться.

Чтобы отреагировать на это обновление атрибутом «non template», добавьте watcher.

watchers:{
    vehicle_details(value){
    }
}