[Vuejs]-How to display a name refered by id in tables created by VUE JS?

by

1👍

✅

Another approach is still using EagerLoad from laravel controller or model

with('family')

and we will get nested JSON data

to filter the field that only display as needed in table
just use .(dot) to refer to the nested Object name
in my case just like this code below

DataViewer.vue

<tbody>
    <tr v-for="row in model.data">
        <td>{{ row.member_name }}</td>
        <td>{{ row.family.family_name }}</td>
    </tr>
</tbody>

2👍

You need to eager load your relations.

Member::with('family')->dynamicTable();

https://laravel.com/docs/5.5/eloquent-relationships#eager-loading

Update:

To display individual properties, you use dot notation to access them like:

<tr v-for="row in model.data">
  <td v-for="(value,key) in row">
     <p>id: {{ value.id }}</p>
     <p>member_name: {{ value.member_name }}</p>
     <p>family_name: {{ value.family.family_name }}</p>
  </td>
</tr>

0👍

Ok, After reading Laravel, Vuejs and axios documentation, I realize that I don’t need to change or add any of Vue and axios code to filter what field to display

So, the code to add it is not in Vue or Axios though, but in Laravel using query builder, just Join and add a specific query for what kinda field that I need to display, because Vue Js and Axios just pull the whole data from laravel db, so be a better approach i think, to specific the fields from laravel query instead

I do the query in the trait DataTableViewer.php

trait DataTableViewer{

public function scopeDynamicTable($query){

    return $query->join('families', 'members.id', '=', 'families.id')
            ->select('member_name', 'family_name')
            ->paginate(10);
}

First, I join the Members table with Families table according to each table ID,
then I select, only the specific field that I want to display in my Vue Table and paginate them by 10 data per page

as simple as that,
Thanks to @alanfcm and @btl for the clues

Leave a comment