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

Posted

技术标签:

【中文标题】需要在 vue.js 前端和 Laravel 后端打印名称而不是 id【英文标题】:Need to print name instead of id in vue.js frontend and Laravel backend 【发布时间】: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>

请帮帮我...

【问题讨论】:

【参考方案1】:

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

在您获得视图的控制器中,您将看到类似:$tags = Tag::all() 您可以简单地加载每个类别:$tags = Tag::with('category')-&gt;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 之类的网站并付费让他们为您完成。

以上是关于需要在 vue.js 前端和 Laravel 后端打印名称而不是 id的主要内容,如果未能解决你的问题,请参考以下文章

将 Vue js 前端和 laravel 后端(api 路由)托管到共享服务器?

如何在 vue.js 前端通过集合数据显示 laravel 组

为啥 Laravel 中间件 CORS 不能与 Vue.js 一起使用

从另一个组件vue js和laravel调用方法

Laravel + Vue JS:从数据库中获取/存储 Eloquent 模型的值

Heroku 部署混乱:Vue.js 前端与 Flask 后端