How to display user name instead of id (foreign key) in laravel & vue.js

Question

I want to display the user name instead supervisor_id in the table list in Vue.js. this is one to many relationship. supervisor_id is foreign key from user table.

/// this is view in vue.js. I want to to change work.supervisor_id into something like work.user.name, but it do not work.

<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>

/// this is my script in 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));
      }
    },

/// this is my work controller

public function index()
{
    return Work::latest()->paginate(10);
}

the data in the vue.js devtool

Hi Mohd, please reduce your question at the maximum around your problem, and be clear with indented code etc. Thanks you — Slim
– Slim, Commented May 24, 2019 at 8:34

thisiskelvin · Accepted Answer · 2022-02-10 17:28:56Z

6

For this to work, it would require the a relationship on the Work model which returns the supervisor record which you require.

This will allow you to get the supervisor's (or user's depending on the relationship) name.

Work Model (app\Work.php):

public function supervisor()
{
    return $this->hasOne(User::class, 'supervisor_id');
}

Now in your controller, you can use the ->with() eloquent method to eager load a relation:

public function index()
{
    return Work::with('supervisor')->latest()->paginate(10);
}

You should now be able to access the supervisor name within vue using:

{{ work.supervisor.name }}

I hope this helps.

edited Feb 10, 2022 at 17:28

answered May 24, 2019 at 9:14

thisiskelvin

4,2021 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display user name instead of id (foreign key) in laravel & vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related