Question

我遇到以下问题，我将一个对象作为道具传递给组件，当我在组件中进行console.log记录时，它返回null。当我在传递对象的父级（根）中进行控制台日志记录时，该对象有效。

有人能发现任何问题或我做错了什么吗？

我的直觉告诉我车辆详细信息组件在root检索数据之前正在记录 vehicle_details 。我不应该为此使用安装架还是应该采用其他方法？

谢谢。

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已被调用，将不再被调用。

要通过“非模板”属性对此更新做出反应，请添加一个watcher。

watchers:{
    vehicle_details(value){
    }
}

VueJS：将对象作为prop传递给组件-作为null传递

1 个答案: