Как отобразить имя пользователя вместо id (внешний ключ) в laravel & vue.js

Question

Я хочу отобразить имя пользователя вместо supervisor_id в списке таблиц в Vue.js. это отношения один ко многим. 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);
}

данные в vue.js devtool

Answer 1

Чтобы это работало, для создания модели Work потребуется создание отношения, которое возвращает требуемую запись supervisor.

Это позволит вам получить значения supervisor.(или user в зависимости от отношения) `name.

Рабочая модель (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 }}

Надеюсь, это поможет.