Question

我正在使用VueJS第2版，当我点击内部链接（比方说） componentA 时，我调用 componentB ，如下所示：

<template>
    <div>
        hey this is pokemon {{pokemonName}} with ID {{pokemonID}}
    </div>
</template>
<script>
    export default {
        data() {
            return {
                pokemonName: this.$route.params.name,
                pokemonID: this.$route.params.pokeid
            }
        },
        created: function(){
           console.log(pokemonID); // here is the error
           // here I need to do some operations with pokemonID
        }
}
</script>

点击链接后，我正确地看到文本嘿这是带有ID y 的口袋妖怪x但是当我检查控制台时我也读到了这个：ReferenceError: pokemonID is not defined。

正如您所看到的，我尝试使用created生命周期钩子，因为我需要在加载组件后立即对pokemonID变量进行操作。

我该如何解决这个问题？

Answer 1

您需要在此使用适当的范围，忘记使用this，如下所示：

created: function(){
   console.log(this.pokemonID); // Now there should be no error
   // here I need to do some operations with pokemonID
}

您收到错误，因为在创建的函数中没有定义pokemonID变量，而组件范围内有pokemonID变量，this.pokemonID可以访问该变量}。

等待组件数据加载

1 个答案: