Vuejs does not fetch hasOne relational data from laravel API

Question

I am creating a vue component for Invoices to display them in a table. From the controller, I am sending 2 more tables ("customers" & "invoice_products") related to invoices table in order to populate them. I am sharing the API (where it clearly returns them)

{
  "invoice": {
  "id": 13,
  "customer_id": "2",
  "gross_total": 65,
  "vat": 5,
  "tax": 10,
  "status": 1,
  "created_at": "2022-05-30T03:46:54.000000Z",
  "updated_at": "2022-05-30T03:46:54.000000Z",
  "invoice_products": {
      "id": 5,
      "invoice_id": 13,
      "product_id": 1,
      "quantity": 22,
      "total": 40,
      "updated_at": "2022-05-30T03:46:54.000000Z",
      "created_at": "2022-05-30T03:46:54.000000Z"
 },
"customers": {
    "id": 2,
    "name": "Customer B",
    "email": "[email protected]",
    "phone": "789456123",
    "address": "Dhaka",
    "created_at": null,
    "updated_at": null
 }
},

But when I try to fetch them like getInvoiceById.invoiceProducts.quantity, It returns the following error :

enter image description here

The tables look like :

enter image description here

From the model :

public function invoiceProducts() {
    return $this->hasOne('App\Models\InvoiceProduct', 'invoice_id');
}

public function customers() {
    return $this->belongsTo('App\Models\Customer', 'customer_id');
}

From Controller :

public function singleInvoice(Request $request, $id) {
    $data['invoice'] = Invoice::with('invoiceProducts', 'customers')->where('id', $id)- 
     >first();
    return response()->json($data,200);
}

From template :

 <td>{{ invoiceInfo.customers.name }}</td>

If I write this instead : {{ invoiceInfo.customers}} that displays the following json :

{ "id": 1, "name": "Customer A", "email": "[email protected]", "phone": "123456789", "address": "Dhaka", "created_at": null, "updated_at": null }

From script :

export default {

    data() {
        return {
           allerrors : [],
           invoiceInfo : [],
       }
   },

   mounted() {
      axios.get('/api/single-invoice/'+this.$route.params.id).then(response => {
         this.invoiceInfo = response.data.invoice
      })
   }
}

Please avoid using pictures in this manner. You can paste in a portion or the whole error stack. — vfioox
– vfioox, Commented May 30, 2022 at 17:57
Does it attempt to display these values before the mounted function is called? — Nigel Ren
– Nigel Ren, Commented May 30, 2022 at 17:59
@NigelRen How can I check that, should I move it to created hook ? — azim
– azim, Commented May 30, 2022 at 18:01

azim · Accepted Answer · 2022-05-30 20:47:22Z

1

I had to declare the variable customers in invoiceInfo before using that in the template :

export default {

data() {
    return {
        allerrors : [],
        invoiceInfo : {
            customers : {}
        }
    }
},

Thanks for your efforts guys.

edited May 30, 2022 at 20:47

answered May 30, 2022 at 18:10

azim

416 bronze badges

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

2 Comments

Sachith Muhandiram Over a year ago

Please post complete answer here.

azim Over a year ago

Ok, I am updating the answer

Collectives™ on Stack Overflow

Vuejs does not fetch hasOne relational data from laravel API

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related