After creating an array and pushing data into it, the array turns into a proxy, preventing me from using JavaScript array functions on it.
export default {
name: 'Home',
components: { PokeList, FilterType, SearchPokemon},
data() {
return {
pokemons: [],
numOfPokemon: 151,
types: []
}
},
methods: {
async prepairPokeIds() {
for (let i = 1; i <= this.numOfPokemon; i++){
await this.fetchPokemonData(i)
}
},
async fetchPokemonData(id) {
try {
const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
const data = await res.json()
this.types.push(data.types[0].type.name)
this.pokemons.push(data)
return data
} catch (error) {
console.log(error)
}
},
async test(){
console.log(this.types.length)
}
},
async created() {
this.prepairPokeIds()
await this.test()
console.log(this.pokemons)
console.log(this.types)
}
}
</script>Even though there is data inside the proxy target, the console.log within the test function returns a value of 0. Why is that?