javascript - VueJS : passing object to component as prop - comes through as null

Question

我遇到以下问题，我将对象作为 Prop 传递给组件，当我在组件中控制台记录 Prop 时，它返回 null。当我在传递对象的父级(根)中控制台记录对象时，它是有效的。

任何人都可以发现任何问题或我做错了什么吗？

我的直觉告诉我，vehicle-details 组件 在 root 检索数据之前记录了 vehicle_details。我不应该为此使用 mounted 还是应该采用不同的方法？

谢谢。

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 组件 - 查看记录 vehicle_details 的安装部分 - 返回 null

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

创建时您的数据为 null，当mounted 时，它会传播到子组件的属性。

只有在异步调用返回后，成员才会被设置。那时，只会更新响应式(Reactive)监听器。 mounted已经调用过，不会再调用。

要从“非模板”属性对此更新使用react，请添加一个watcher。

watchers:{
    vehicle_details(value){
    }
}