ждет компонент данных для загрузки

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.