私はVueJSバージョン2で働いていると（のは言わせ）<strong>componentA</strong>内部リンクにIをクリックしたときに、私はこのようなものです<strong>componentB</strong>呼び出す

Question

をロードするためのコンポーネントのデータを待っている：

<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を使用するのを忘れて、ここで適切なスコープを使用する必要があります。作成した関数で定義されたpokemonID変数が存在しないのでありながら

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

あなたは、エラーを取得していますthis.pokemonIDによってアクセスできるコンポーネントの範囲内の変数pokemonID。