等待组件数据加载

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> 

后点击链接我正确地看到文本嘿这是pokemon x与ID y但当我检查控制台我也读这个：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访问。