I want to make an API call from which the component's data gets initialized:
<script>
export default {
data() {
const fetchURL = `http://127.0.0.1:8000/data`;
response = await fetch(fetchURL)
return await response.json()
}
}
</script>
This approach doesn't work because data() can't be async. What's the right idiom to use here?
You could initialize an empty array called items inside the data option and use the created hook to update it :
<script>
export default {
data() {
return{
items:[]
}
},
async created(){
const fetchURL = `http://127.0.0.1:8000/data`;
response = await fetch(fetchURL)
this.items= await response.json()
}
}
</script>
