需要在 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')->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 一起使用