Function returning "[object Promise]" instead of boolean data

Question

I am trying to make decision based on returned boolean value from a function. This is my function:

const isAssigned = async (issueId) => {
    try {
        const response = await axios.get(route('issueAssigned', { issueId: issueId }));
       return response.data.isAssigned;
    } catch (error) {
        console.error(error);
        return false;
    }
};

when i console.log(response.data.isAssigned) inside the function it returns true or false based on the result from the request correctly, but when i want to use it in template the function returns "[object Promise]" and not true or false.

This is my code inside template:

<tr v-for="(detail, index) in details" :key="index">
<td class="align-middle" >{{ index + 1 }}</td>        
<td class="align-middle" colspan="3">
<div v-if="isAssigned(detail.issues.id)">
     <span class="text-success">Assigned</span>
</div>
<div v-else>
     <span class="text-danger">Not Assigned</span>
</div>
</td>
</tr>

It always returns true.

Answer 1

You should load your data before displaying it for a user:

const loaded = ref(false);
onMounted(async()=>{
  await Promise.all(details.map(async d => d.isAssigned = await isAssigned(d.issues.id));
  loaded.value = true;
}

<template v-if="loaded">
<tr v-for="(detail, index) in details" :key="index">
<td class="align-middle" >{{ index + 1 }}</td>        
<td class="align-middle" colspan="3">
<div v-if="detail.isAssigned">
     <span class="text-success">Assigned</span>
</div>
<div v-else>
     <span class="text-danger">Not Assigned</span>
</div>
</td>
</tr>
</template>