I have integrated a v-data-table into my project to display data pulled from the backend. The data comes in the form of item IDs. How can I efficiently match the incoming IDs with the object IDs in the categories and show the corresponding category names in the table?
<v-data-table :headers="headers" :items="fetchCategories" class="elevation-1" :search="search">
<template slot="item" slot-scope="props">
<tr>
<td>{{ props.item.id }}</td>
<td class="text-xs-right">{{ props.item.testId }}</td>
<td class="justify-center px-0">
<v-btn icon class="mx-0" @click="editItem(props.item)">
<v-icon class="mx-0 primary--text white--text">edit</v-icon>
</v-btn>
<v-btn icon class="mx-0" @click="deleteItem(props.item)">
<v-icon class="mx-0 red--text white--text">delete</v-icon>
</v-btn>
</td>
</tr>
DATA
categories: [
{
id: 1,
name: 'Category 1',
},
{
id: 2,
name: 'Category 2',
},
{
id: 3,
name: 'Category 3',
},
{
id: 4,
name: 'Category 4',
},
{
id: 5,
name: 'Category 5',
}
fetchCategories:[]
METHODS
created() {
fetch('example-backend.com/categories')
.then((response) => {
return response.json();
})
.then((data) => {
this.fetchCategories = data;
});
},