Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

partabsaifzakir's avatar

Need To Fetch And Display Data

I am working on Laravel 5.7 and VueJs 2....

I am working on invoice application, i need to make relationship between my tables:

Table 1: VendorsTable Table 2: TicketInvoiceTable Table 3: TicketInvoiceItemsTable

My TicketInvoice Model

    public function vendor(){
        return $this->belongsTo('App\Vendor');
    }

    public function ticketInvoiceItems(){
        return $this->hasMany('App\TicketInvoiceItems');
    }

My TicketInvoiceItems Model

    public function ticketInvoice(){
        return $this->belongsTo('App\TicketInvoice');
    }

My Vendor Model

    public function ticketInvoices(){
        return $this->hasMany('App\TicketInvoice');
    }

I also assign foreign key in TicketInvoice and TicketInvoiceItems Table:

//CreateTicketInvoiceTable
$table->foreign('vendor_id')->references('id')->on('vendors');

//CreateTicketInvoiceItemsTable
$table->foreign('ticket_invoice_id')->references('id')->on('ticket_invoices');

I successfully seed Faker data in all tables. Now i need to display the Vendor's Name in my Vue template.

I dont know how to do this, here is my Vue code:

<tr>
    <th>Invoice No.</th>
    <th>Issued Vendor Name</th>
    <th>Invoice Date</th>
    <th>Total Amount</th>
</tr>

<tr v-for="ticketInvoice in ticketInvoices" :key="ticketInvoice.id">
    <td>{{ ticketInvoice.ticket_invoice_no }}</td>
    <td>{{ ticketInvoice.vendor_name}}</td> //NEED VENDOR NAME HERE
    <td>{{ ticketInvoice.ticket_invoice_date }}</td>
    <td>{{ ticketInvoice.ticket_invoice_grand_total }}</td>
</tr>

Script

<script>
export default {
  data() {
    return {
      ticketInvoices: {},
      form: new Form({  //ALL FIELDS IN TICKET INVOICE TABLE
        id: "",
        vendor_id: "",
        ticket_invoice_no: "",
        ticket_invoice_date: "",
        ticket_invoice_fares_total: "",
        ticket_invoice_taxes_grand_total: "",
        ticket_invoice_grand_total: "",
        ticket_invoice_grand_total_words: "",
        ticket_invoice_terms: "",
      })
    };
  },
  methods: {
    loadTicketInvoices() {
      axios.get("api/ticket-invoice").then(({ data }) => (this.ticketInvoices = data.data));
    },
  },
};
</script>

FROM THIS RESULT, i get data which is in TicketInvoiceTable and tried some other things but no success.

0 likes
10 replies
drjd's avatar

Although I can't see the method behind your API call to get ticket invoices, I imagine the vendor relationship is not being eager loaded.

If you always want to eager load the vendor relationship for a ticket invoice you can add the $with property to the TicketInvoice model.

protected $with = [
    'vendor',
];

Now, in your Vue template you will be able to access the vendor relationship by dot notation.

<td>{{ ticketInvoice.vendor.name }}</td>

The vue-devtools extension can be very useful for delving into the data held in your Vue component to see if relationships are loaded.

partabsaifzakir's avatar

@drjd sorry i forgot to mention the controller....

TicketInvoiceControler

class TicketInvoiceController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $ticketInvoices = TicketInvoice::orderBy('created_at', 'desc')->paginate(20);
    }
drjd's avatar

The vendor relationship is not being loaded as suspected.

Adding the $with property to the TicketInvoice model as described above should fix things for you.

partabsaifzakir's avatar

@drjd Ok i'm adding this in my TicketInvoice , Lets see, BTW what is 'vendor' in your code ? should i write exactly like this ? 'vendor'

protected $with = [
    'vendor',
];
partabsaifzakir's avatar

@drjd

TicketInvoice Model

class TicketInvoice extends Model { protected $fillable = [ 'vendor_id', 'ticket_invoice_no', 'ticket_invoice_date', 'ticket_invoice_fares_total', 'ticket_invoice_taxes_grand_total', 'ticket_invoice_grand_total', 'ticket_invoice_grand_total_words', 'ticket_invoice_terms' ];

protected $with = [
    'vendor'
];

public function vendor(){
    return $this->belongsTo('App\Vendor');
}

public function ticketInvoiceItems(){
    return $this->hasMany('App\TicketInvoiceItems');
}

}

Vue Page

<td>{{ ticketInvoice.vendor.vendor_company_name }}</td>

It's Working Mate :)

drjd's avatar
drjd
7 years ago
Best Answer
Level 3

The $with array is a list of relationships that you want to eager load (or in other words, load automatically) for every instance of a model.

protected $with = [
    'vendor',
];

With this code, you are specifying that the Vendor model referenced in your belongsTo relationship named vendor() will always be included with an instance of TicketInvoice.

If you decided that your hasMany relationship named ticketInvoiceItems should also be eager loaded on every instance of the TicketInvoice model then you would add this to the with array too. The value you add to $with must match the name of the relationship.

protected $with = [
    'ticketInvoiceItems',
    'vendor',
];
1 like
partabsaifzakir's avatar

@drjd Look At this not working for TicketInvoiceItems

protected $with = [
        'vendor',
        'ticketInvoiceItems'
];

<td>{{ ticketInvoice.ticketInvoiceItems.passenger_name }}</td>
drjd's avatar

@partabsaifzakir Because ticketInvoiceItems is a hasMany relationship then it will always be a collection of items.

I'm not sure what data the ticket_invoice_items table includes, but if you were to add the below code you would see the content of the collection. You could then access passenger_name by key or something similar.

Note that even though your relationship is called ticketInvoiceItems on the model, it will be available as ticket_invoice_items in Vue.

<td>{{ ticketInvoice.ticket_invoice_items }}</td>

Again, the vue-devtools browser extension is highly effective at browsing through objects so you can see the names of keys.

Please or to participate in this conversation.