Vue component gets prop only if data attributes not set-CodePudding

I need help. I'm kind of an amateur in Vue3, and can´t understand why this happens:

If I set this in the parent component:

props: [ 'code' ],    
data() {
    return {
        asset: {
            id: '',
            brand: '',
            group: {
                name: '',
                area: ''
            }
        }
    }
},
created() {
    axios.get('/api/myUrl/'   this.code, {})
        .then(response => {
            if (response.status === 200) {
                this.asset = response.data;
            }
        })
        .catch(error => {
                console.log(error);
        })
}

then, in my component <asset-insurance :asset_id="asset.id"></asset-insurance>, asset_id prop is empty.

But, if I set:

props: [ 'code' ],
data() {
    return {
        asset: []
    }
},
created() {
    axios.get('/api/myUrl/'   this.code, {})
        .then(response => {
            if (response.status === 200) {
                this.asset = response.data;
            }
        })
        .catch(error => {
            console.log(error);
        })
}

then, the asset_id prop gets the correct asset.id value inside <asset-insurance> component, but I get a few warnings and an error in the main component about asset property group.name not being set (but it renders correctly in template).

Probably I'm doing something terribly wrong, but I can't find where is the problem. Any help?

Edit:

I'm checking the prop in child component AssetInsurance just by console.logging it

<script>
export default {
    name: "AssetInsurance",
    props: [
        'asset_id'
    ],
    created() {
        console.log(this.asset_id)
    }
}
</script>

asset_id is just an integer, and is being assigned correctly in parent's data asset.id, because I'm rendering it in the parent template too.

CodePudding user response：

It's incorrect to define asset as an array and reassign it with plain object. This may affect reactivity and also prevents nested keys in group from being read.

The problem was misdiagnosed. asset_id value is updated but not at the time when this is expected. Prop value is not available at the time when component instance is created, it's incorrect to check prop value in created, especially because it's set asynchronously.

In order to output up-to-date asset_id value in console, a watcher should be used, this is what they are for. Otherwise asset_id can be used in a template as is.

CodePudding user response：

Ok, I think I found the proper way, at least in my case.

Prop is not available in the component because it is generated after the creation of the component, as @EstusFlask pointed.

The easy fix for this is to mount the component only when prop is available:

<asset-insurance v-if="asset.id" :asset_id="asset.id"></asset-insurance>

This way, components are running without problem, and I can declare objects as I should. :)

Thank you, Estus.