I attempted to retrieve data from an API using parameters that are passed through an argument in a v-for loop. In the findUser function, I am able to successfully log the desired data. However, I am unable to retrieve it at the end of the findUser function; why is this happening?
I am aware that there is an asynchronous method available to retrieve the data, but I am unsure how to implement it to achieve my desired outcome. I also considered calling both APIs simultaneously, but encountered the same issue and do not know how to resolve it.
<template>
<div>
<h4>Received Lists</h4>
<p v-for="element in results" id="flex-list" :key="element.list_id">
{{ element.list_name }} from {{ findUser(element.user_id) }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
results: '',
nickname: '',
}
},
created() {
this.$axios
.get(`/api/listReceived/${this.$auth.user[0].user_id}`)
.then((res) => {
this.results = res.data
console.log(JSON.stringify(this.results))
})
.catch((err) => {
console.error(err)
})
},
methods: {
findUser(id) {
console.log(id)
let data = ''
this.$axios
.get(`http://localhost:3000/api/userdata/${id}`)
.then((res) => {
data = res.data[0].nickname
console.log(data)
})
.catch((err) => {
console.error(err)
})
return data
},
},
}
</script>