i am using v-data-table for my project. The data I pull from the backend comes as item id. How can I match the incoming id with the object id in the categories and reflect the category name to 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;
});
},
You can use additional method to convert that. I use lodash
import _ from "lodash"
findInObject(obj,key) {
return _.find(obj, function(o) {return o.id == key}) // this will return object from categories data that matched the key
}
and in your template slot, instead of this:
<td>{{ props.item.id }}</td>
you can use this
<td>{{ findInObject(categories, props.item.id).name }}</td>