When I run console.log(this.detaliiMP), it currently returns an empty array. My goal is to wait for the getData() function to retrieve the data and populate the detaliiMP array before logging it to the console.
const app = Vue.createApp({
data() {
return {
detaliiMP: []
}
},
methods: {
getData() {
fetch("https://random-data-api.com/api/v2/users?size=5")
.then(res => res.json())
.then(data => this.detaliiMP = data)
.catch(err => console.error(err.message))
},
showData() {
this.getData()
console.log(this.detaliiMP)
}
},
})
app.mount('#app')<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<button @click="getData">Get Data</button>
<button @click="showData">Console LogOut</button>
<p v-for="item in detaliiMP">{{ item.first_name }}</p>
</div>I attempted to use async/await but it seems like I made a mistake somewhere because it's not functioning as expected.