Need to print name instead of id in vue.js frontend and Laravel backend - laravel

Question

Here is my CategoryController.php code...
public function name($id) {
$f = Category::findOrFail($id);
$nm = $f->name;
return $nm;
}
Here is my router.
Route::get('/category/{id}', [CategoryController::class, 'name']);
In vue.js I defined this in method,
async getCategoryName($id){
await this.callApi('get','/category/' + $id)
.then(response => {
this.name = response.data.name
return this.name;
});
}
In the table, I need to get category name instead of category id. from URL I get category name but It shows that [object promise]
<table class="_table">
<!-- TABLE TITLE -->
<tr>
<th>ID</th>
<th>Category Name</th>
<th>Name</th>
<th>Created At</th>
<th>Action</th>
</tr>
<!-- TABLE TITLE -->
<!-- ITEMS -->
<tr v-for="(tag, i) in tags" :key="i" if="tags.length">
<td>{{tag.id}}</td>
<td>{{getCategoryName(tag.categoryId)}}</td>
<td class="_table_name">{{tag.name}}</td>
<td>{{tag.created_at}}</td>
<td>
<Button type="info" size="small" #click="showEditModal(tag, i)">Edit</Button>
<Button type="error" size="small" #click="showDeletingModal(tag, i)" :loading="tag.isDeleting">Delete</Button>
</td>
</tr>
</table>
Please help me...

Answer 1

This is the normal behaviour of vue.js, why don't you add the category name in your controller instead of loading it server side, your approach is not good performance wise.
In your controller where you get the view you will have something like: $tags = Tag::all()
You can simply load in each categroy: $tags = Tag::with('category')->get()
In your vue app you can then simply access the name like: tag.category.name