Cannot read properties of undefined (reading) in Vue3

Question

I am getting this call from the famous ApiPokemon: https://pokeapi.co/api/v2/pokemon?limit=151

Once I have that data I want to pass it through another method (_getPokemonData) to map the complete data for each Pokémon.

However when I create this VueJS method I get this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_getPokemonData')

Why can't I call the _getPokemonData method inside the forEach? This is my code:

mounted() {
    this.$http
      .get("https://pokeapi.co/api/v2/pokemon?limit=151")
      .then((response) => {
        //this.pokemons = response.data.results;
        this.pokemons = response.data.results.forEach(function(pokemon){
          this._getPokemonData(pokemon); 
        });
      });

    this.$http
      .get("https://pokeapi.co/api/v2/type/")
      .then((response) => {
        this.types = response.data.results;
      });
  },

  methods: {
    _getPokemonData(pokemon) {
      console.log(pokemon);
    },

Does this answer your question? Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? — gre_gor
– gre_gor, Commented Jun 21, 2022 at 18:42

Sombriks · Accepted Answer · 2022-06-21 18:29:58Z

1

switch the function in forEach for a arrow function. by using 'function' you create a new scope which hijacks the 'this' reference.

see this

answered Jun 21, 2022 at 18:29

Sombriks

3,6804 gold badges43 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot read properties of undefined (reading) in Vue3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related