I have a vue component to display the user notifications that works great BUT after the user clicks on the notification and a method is executed the notification is still there until the component checks the db again, it checks for notifications every minute, I want to after the user clicks on it and the method gets executed to refresh the component to that the notification disappears.
This is my component code
<template>
<div style="display: inline" v-if="notifications">
<el-dropdown v-if="notifications.length > 0" trigger="click">
<el-badge is-dot class="item">
<span class="btn-link-preview action-button" style="padding: 5px !important">
<i class="fas fa-bell"></i>
</span>
</el-badge>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(notif, index) in notifications" :command="notif"
:key="index" class="clearfix">
<a :href="'/getZip/' +'?request_id=' + notif.data.request + '¬ification_id=' + notif.id">
{{notif.data.action}}
</a>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
name: "NotificationComponent",
data() {
return {
notifications: [],
interval: null,
}
},
methods: {
getNotifications() {
this.$inertia.replace('getNotifications', {method: 'get'})
.then(() => {
this.notifications = this.$page.auth.user.flash.notifications;
})
}
},
created() {
this.getNotifications();
this.interval = setInterval(() => {
this.getNotifications();
}, 60000);
},
beforeDestroy() {
clearInterval(this.interval);
}
}
</script>
This is the method the notification when clicked gets executed, it created a zip to download
public function getZip(Request $request)
{
$job_request = JobRequest::findOrFail($request->request_id);
if ($job_request->user_id == auth()->user()->id) {
$zip = new ZipArchive;
if (true === ($zip->open('ReportesTodos-' . $request->request_id . '.zip',
ZipArchive::CREATE | ZipArchive::OVERWRITE))) {
foreach ($job_request->reports as $report) {
if (Storage::disk('report_upload')->exists($report->report_name . '.xlsx')) {
$zip->addFile(public_path('reports\' . $report->report_name . '.xlsx'),
$report->report_name . '.xlsx');
}
}
$zip->close();
}
$user = auth()->user();
foreach ($user->notifications as $notification) {
if ($notification->id == $request->notification_id) {
$notification->markAsRead();
}
}
}
return response()->download(public_path('ReportesTodos-' . $request->request_id . '.zip'),
'ReportesTodos-' . $request->request_id . '.zip');
}
Is there a way to forcefully refresh the component? or How can I get the notification to disappear after the method?