In the single code component, I have the following script:
<script setup lang="ts">
import ApiService from '../service/api'
import { reactive, onBeforeMount } from 'vue'
let pokemons = reactive([])
onBeforeMount(async ()=> {
const response = await ApiService.getAll()
pokemons = response.data.results
return pokemons
})
</script>
Pokemons inside the OnBeforeMount exist, but not outside of it.
Any tips?
onBeforeMount's callback function does not require a return valuereactive is meant to be used as a proxy to a ref value to watch all of the ref's nested properties.<template>
<ul>
<li v-for="p in pokemons" :key="p.id">{{ p.name }}</li>
</ul>
</template>
<script setup lang="ts">
import ApiService from '../service/api'
import { reactive, onBeforeMount, ref } from 'vue'
const allPokemon = ref([])
const pokemons = reactive(allPokemon)
onBeforeMount(async ()=> {
const response = await ApiService.getAll()
allPokemon.value = response.data.results
})
</script>