需要在 vue.js 前端和 Laravel 后端打印名称而不是 id答案

【问题标题】：Need to print name instead of id in vue.js frontend and Laravel backend需要在 vue.js 前端和 Laravel 后端打印名称而不是 id
【发布时间】：2021-08-02 13:38:11
【问题描述】：

这是我的 CategoryController.php 代码...

public function name($id) {
    $f = Category::findOrFail($id);
    $nm = $f->name;
    return $nm;
}

这是我的路由器。

Route::get('/category/{id}', [CategoryController::class, 'name']);

在 vue.js 中我在方法中定义了这个，

async getCategoryName($id){
            await this.callApi('get','/category/' + $id)
            .then(response => {
                this.name = response.data.name
                return this.name;
            });
    }

在表格中，我需要获取类别名称而不是类别 ID。从 URL 我得到类别名称，但它表明 [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>

请帮帮我...

【问题讨论】：

标签： laravel vue.js vue-component vue-router laravel-8

【解决方案1】：

这是 vue.js 的正常行为，为什么不在控制器中添加类别名称而不是在服务器端加载它，你的方法性能不好。

在您获得视图的控制器中，您将看到类似：$tags = Tag::all() 您可以简单地加载每个类别：$tags = Tag::with('category')->get()

在您的 vue 应用程序中，您可以简单地访问名称，例如：tag.category.name

【讨论】：

async getCategoryName($id){ await this.callApi('get','/category/' + $id) .then(response => { this.name = response.data.name return this.name; }); }
对不起，这是我的方法
我需要用类别名称替换子类别 ID。所以通过传递子类别表 categoryId 我取了类别名称。我在方法中返回了它。但它不起作用。可以帮帮我吗？
是的，这个调用不是必需的，也不利于你的性能，你可以加载所有其他数据的类别名称，你能显示你的控制器方法吗？（不是用于 api 请求的那个，是您获取视图和所有内容的那个）
@YasithSFonseka 我要插话说，这不是我们为您工作的平台。如果您无法完成此任务，那么您要么需要了解更多信息（阅读一些文档），要么访问 Fiverr 或 Freelancer 之类的网站并付费让他们为您完成。