estoy usando v-data-table para mi proyecto. Los datos que extraigo del backend vienen como identificación del artículo. ¿Cómo puedo hacer coincidir la identificación entrante con la identificación del objeto en las categorías y reflejar el nombre de la categoría en la tabla?
<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>DATOS
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:[]MÉTODOS
creado() {
fetch('example-backend.com/categories') .then((response) => { return response.json(); }) .then((data) => { this.fetchCategories = data; });},
Puede usar un método adicional para convertir eso. yo uso 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 }y en su ranura de plantilla, en lugar de esto:
<td>{{ props.item.id }}</td>puedes usar esto
<td>{{ findInObject(categories, props.item.id).name }}</td>