How to append to a Laravel collection and accessing it in Vue / Inertia

I am using laravel with vue and inertia. I am trying to get all stripe invoices for a user using laravel cashier, and then append the value output of $invoice->date()->toFormattedDateString() to the Stripe\Invoice collection, but it does not work.

Here is my simplified code:

        $invoices = $invoices->map(function ($invoice) {
            $invoice->date_invoice_paid = $invoice->date()->toFormattedDateString();
            return $invoice;
        });
        dd$invoices);
        return Inertia::render('Account/Subscriptions/Invoices', [
            'invoices' => $invoices,
        ]);

When I dd($invoices), date_invoice_paid gets added to the Laravel\Cashier\Invoice object but does not get added to the Stripe\Invoice object, which is what I am trying to do.

Output:

Illuminate\Support\Collection {#1355 ▼ // app/Http/Controllers/Account/Subscriptions/AccountSubscriptionInvoiceController.php:25
  #items: array:1 [▼
    0 => Laravel\Cashier\Invoice {#1364 ▼
      #owner: App\Models\User {#720 ▶}
      #invoice: Stripe\Invoice {#1371 ▶}
      #items: null
      #taxes: null
      #discounts: null
      #refreshed: false
      #refreshData: []
      +"date_invoice_paid": "Aug 13, 2023"
    }
  ]
  #escapeWhenCastingToString: false
}

As a result, accessing invoice.date_invoice_paid in my .vue file does not work:


<template>
    <AccountLayout>
        <li v-for="(invoice, index) in invoices" :key="invoice.id" class="border p-2">
            <div>Date invoice paid: {{ invoice.date_invoice_paid }}</div>
        </li>
    </AccountLayout>
</template>

<script setup>
import AccountLayout from '@/Layouts/AccountLayout.vue';
import { computed, onMounted } from 'vue';
const props = defineProps({
    invoices: Array,
});

Output:

Date invoice paid:

connecteev

2 years ago

Best Answer

Level 11

Here's my tentative workaround:

        $invoices = $invoices->map(function ($invoice) {
            return [
                'stripeInvoiceObject' => $invoice,
                'dateInvoicePaid' => $invoice->date()->toFormattedDateString(),
            ];
        });

<template>
    <AccountLayout>
                        <li v-for="(invoice, index) in invoices" :key="invoice.stripeInvoiceObject.id" class="border p-2">
                            <div>Invoice # {{ index + 1 }}</div>
                            <div>Invoice ID: {{ invoice.stripeInvoiceObject.id }}</div>
                            <div>Date Invoice Paid: {{ invoice.dateInvoicePaid }}</div>
                        </li>
    </AccountLayout>
</template>

<script setup>
import AccountLayout from '@/Layouts/AccountLayout.vue';
import { computed, onMounted } from 'vue';
const props = defineProps({
    invoices: Array,
});

1 like

krisi_gjika

2 years ago

Level 14

you should not be passing data like this to Vue / Inertia as everything you pass is visible on the frontend, pass only what you need. Create an invoice resource, declare your fields there and pass a collection of that resource.

Please or to participate in this conversation.