如何在 laravel 和 vue.js 中显示用户名而不是 id（外键）

Posted 2023-02-22

【中文标题】如何在 laravel 和 vue.js 中显示用户名而不是 id（外键）

【英文标题】：How to display user name instead of id (foreign key) in laravel & vue.js

【发布时间】：2019-10-10 19:18:10

【问题描述】：

我想在 Vue.js 的表格列表中显示用户名而不是 supervisor_id。这是一对多的关系。 supervisor_id 是用户表中的外键。

/// 这是 vue.js 中的视图。我想将 work.supervisor_id 更改为 work.user.name 之类的东西，但它不起作用。

<tr v-for="(work,index) in works.data" :key="work.work_id">
                <td>index+1</td>
                <td>work.work_name</td>
                <td>work.supervisor_id</td>  
                <td>work.payment</td>
                <td>work.created_at | myDate</td>
                <td>work.end_date</td>
                <td>work.worker_id</td> 
                <td>

/// 这是我在 vue.js 中的脚本

<script>
export default 
  data() 
    return
      editmode: false,
      works:,
      index:1,
      users:,
      form: new Form(
        work_id:'',
        work_name:'',
        description:'',
        payment:'',
        location:'',
        end_date:'',
        worker_id:'',
        application_status:'New',
        supervisor_id:'',
                   )
    
  ,

  methods:

    getResults(page = 1) 
            axios.get('api/work?page=' + page)
              .then(response => 
                this.works = response.data;
      );
    ,


    loadWork()
      if(this.$gate.isClerk())
       // axios.get('api/work').then((data)=>(this.works = data));
       axios.get('api/work').then(response => (this.works = response.data));
      
    ,

/// 这是我的工作控制器

public function index()

    return Work::latest()->paginate(10);

the data in the vue.js devtool

【问题讨论】：

嗨，Mohd，请尽量减少您的问题，并清楚使用缩进代码等。谢谢您

我已经更新了我的问题。希望你能帮忙

【参考方案1】：

为此，它需要 Work 模型上的关系，该模型返回您需要的 supervisor 记录。

这将允许您获取supervisor（或user，具体取决于关系）`名称。

工作模型（app\Work.php）：

public function supervisor()

    return $this->hasOne(User::class, `supervisor_id');

现在在您的控制器中，您可以使用->with() eloquent 方法来预先加载关系：

public function index()

    return Work::with('supervisor')->latest()->paginate(10);

您现在应该可以在 vue 中使用以下命令访问主管名称：

 work.supervisor.name 

我希望这会有所帮助。