如何在laravel & vue.js中显示用户名而不是id (外键)

在 Laravel 和 Vue.js 中显示用户名而不是 ID（外键），可以通过以下步骤实现：

1. 首先，确保你的数据库中有一个用户表和一个关联表，其中关联表包含一个外键字段，用于存储用户的 ID。
2. 在 Laravel 中，你需要定义用户模型和关联模型之间的关系。在用户模型中，使用 hasMany 方法定义一个关联方法，表示一个用户可以有多个关联记录。在关联模型中，使用 belongsTo 方法定义一个关联方法，表示一个关联记录属于一个用户。
3. 在关联模型中，使用 with 方法来预加载用户模型，以便在查询关联记录时同时获取用户信息。
4. 在 Laravel 的控制器中，查询关联记录时使用 with 方法来加载用户信息。这样，你就可以通过关联模型的关联方法来访问用户的用户名。
5. 在 Vue.js 中，通过 AJAX 请求从后端获取关联记录的数据。在获取数据后，你可以使用 Vue.js 的模板语法来显示用户名。

下面是一个示例代码：

在 Laravel 中的用户模型（User.php）中定义关联方法：

public function relatedRecords()
{
    return $this->hasMany(RelatedRecord::class);
}

在关联模型（RelatedRecord.php）中定义关联方法：

public function user()
{
    return $this->belongsTo(User::class);
}

在 Laravel 的控制器中查询关联记录：

$relatedRecords = RelatedRecord::with('user')->get();

在 Vue.js 中显示用户名：

<div v-for="record in relatedRecords">
    <span>{{ record.user.name }}</span>
</div>

这样，你就可以在 Laravel 和 Vue.js 中显示用户名而不是 ID（外键）了。

注意：以上示例代码仅为演示目的，实际使用时需要根据你的数据结构和业务逻辑进行相应的调整。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云数据库 MySQL、腾讯云对象存储（COS）等。你可以访问腾讯云官网了解更多产品信息和文档：腾讯云官网。