Vue.js 'props' 在模板中工作，但在方法中未定義

Question

我有一個智利 vue 組件，一個屬性作為'initial_features'傳遞。

<child-component :initial_features="features"></child-component>

我的子組件的代碼是：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col">
                {{ initial_features }} //this prop is working here
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['initial_features'],
        data() {
            return {
                features: this.initial_features, //undefined
            }
        },
        methods: {},
        computed: {},
        mounted() {
            console.log(this.initial_features); //output is undefined here
        }
    }
</script>

我已經多次編寫過這種類型的代碼，但這次我沒有得到預期的結果。 道具應該在數據或已安裝部分中工作。 我的代碼有什么錯誤嗎？

Answer 1

看起來這可能是數據競爭條件的情況。

“initial_features”必須在組件加載后在組件的消費者中更新，因此，數據最初設置為未定義，您可以隨時關注initial_features並將data.features分配給initial_features的新值。

如果您希望數據跟蹤/更新道具，請考慮組件上的 v-model 屬性， 這里有更多信息