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

jk's avatar

jk wrote a reply+100 XP

4mos ago

Thanks for the reply Shiv. How would you display a toast notification? The only way I could think of is passing query parameters.

return Inertia::render('csvs/Index', [
            'csvs' => CsvResource::collection(Csv::latest()->paginate(15)),
            'success' => $request->query('success'),
            'updatedCsv' => Csv::find($request->query('csvId')),
]);
jk's avatar

jk started a new conversation+100 XP

4mos ago

The csvs.index page displays a table of csvs with path, completed status, and download link. Csvs can have their export completed with all attributes or export incomplete with none of the attributes. When a Notification broadcast is received, the payload contains a csv's attributes needed to update an incomplete csv. The problem I have is understanding how to update my csvs props data when a notification is broadcast, without a page reload. From my understanding of Vue, you are not supposed to modify the props data.

// csvs.index page
const props = defineProps({
    csvs: {
        type: Object,
        required: true,
    },
});
useEchoNotification(
    `App.Models.User.${userId.value}`,
    (notification) => {
		// modify the csv with payload
        console.log(notification.csvId);
        console.log(notification.userId);
        console.log(notification.path);
    },
    "App.Notifications.ExportDatabaseCompleted",
);
<template v-for="csv in csvs.data" :key="csv.id">
    <TableText>{{ csv.id }}</TableText>
    <TableText>{{ csv.path }}</TableText>

The overall workflow may be irrelevant to the question. User requests a csv export. A csv export Job is queued up, and the user is redirected immediately to csvs.index page. After the job is completes or fails, a ExportDatabaseCompleted Notification is broadcast. The Notification carries a csv payload with the mentioned id, user id, path, etc. The Notification is caught in the csvs.index page.

Thank you for any help offered.