CODEWITHSUNDEEP
vue.jsvue-component
splunk
splunk

Reputation: 6779

waiting for component data to load

I'm working with VueJS version 2 and when I click on a link inside (let's say) componentA I call componentB which is like this:

<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>

After clicking the link I correctly see the text hey this is pokemon x with ID y but when I inspect the console I also read this: ReferenceError: pokemonID is not defined.

As you can see I tried with created lifecycle hook because I need to make the operations on pokemonID variable as soon as the component has been loaded.

How can I solve this?

Upvotes: 0

Views: 1085

Answers (1)

Saurabh
Saurabh

Reputation: 73589

You need to use proper scope here, you forgot to use this, like following:

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

You are getting the error, because there is no pokemonID variable defined in the created function, while there is a pokemonID variable in the scope of component, which can be accessed by this.pokemonID.

Upvotes: 1

Related Questions