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

eggplantSword's avatar

Hide vue component after method gets executed

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 + '&notification_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?

0 likes
1 reply
Slothlike's avatar

The thing I see is :key="index" If you want to force a refresh on a component, one way to do that is to change its key. So, if you're trying to force the refresh on el-dropdown-item I would add an interval counter.

  <el-dropdown-item v-for="(notif,index) in notifications :command="notif" :key="intervalCounter" class="clearfix">

Then, all you have to do is increment your interval.

If you're talking about refreshing this entire component as a whole the same approach should work in its parent component.

I hope this helps in some way.

Please or to participate in this conversation.