2

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;
  });

},

Çağrıhan GÜNAY
  • 81
  • 6

1 Answers1

1

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>
Ananda Vj
  • 172
  • 10