Vue 组件仅在未设置数据属性时获取 prop

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 prop 是空的。

但是，如果我设置：

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 未设置（但它在模板中正确呈现）。

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

编辑：

我正在检查子组件 AssetInsurance 中的道具 console.logging 它

<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>

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

谢谢你，Estus。

Vue 组件仅在未设置数据属性时获取 prop

Vue component gets prop only if data attributes not set

vue.js

vuejs3