Vue 组件仅在未设置数据属性时才获取道具

Question

我需要帮助。我是 Vue3 的业余爱好者，不明白为什么会发生这种情况：

如果我在父组件中设置：

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);
        })
}

然后，在我的组件<asset-insurance :asset_id="asset.id"></asset-insurance> 中，asset_id 属性为空。

但是，如果我设置：

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);
        })
}

然后，asset_id prop 在 <asset-insurance> 组件中获得了正确的 asset.id 值，但我在有关资产的主要组件中收到了一些警告和错误属性 group.name 未设置（但它在模板中正确呈现）。

可能我做错了什么，但我找不到问题出在哪里。有什么帮助吗？

编辑：

我只是通过 console.logging 来检查子组件 AssetInsurance 中的 prop

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

asset_id 只是一个整数，并且在父数据asset.id 中被正确分配，因为我也在父模板中渲染它。

Answer 1

将asset 定义为数组并用普通对象重新分配它是不正确的。这可能会影响响应性，并且还会阻止读取 group 中的嵌套键。

问题被误诊。 asset_id 值已更新，但不是在预期的时间。组件实例创建时prop值不可用，检查created中的prop值是不正确的，特别是因为它是异步设置的。

为了在控制台中输出最新的asset_id 值，应该使用观察者，这就是它们的用途。否则asset_id 可以按原样在模板中使用。

Answer 2

好的，我想我找到了正确的方法，至少在我的情况下。

Prop 在组件中不可用，因为它是在创建组件之后生成的，正如@EstusFlask 所指出的那样。

解决这个问题的简单方法是仅在 prop 可用时安装组件：

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

这样，组件运行没有问题，我可以按我应该的方式声明对象。 :)

谢谢你，埃斯图斯。