CODEWITHSUNDEEP
vue.js
Ryan Sacks
Ryan Sacks

Reputation: 522

How to mark notification as Read using Vue js?

I'm trying to mark a notification as read when a user clicks on it. Right now, when a user clicks on one of the notifications, it marks all of the user's notifications as read, instead of just the one.. I created a "click" function on the <a>.

AppHeader.vue:

<li class="dropdown-item preview-item dropdown-item-notifications" v-for="(unreadNotification, index) in unreadNotifications" :key="index">
    <a class="dropdown-item" type="button" @click="markAsRead()">
        <div class="preview-item-content flex-grow py-2">
            <div v-if="unreadNotification ? unreadNotification.type === 'App\\Notifications\\InterviewRequestCandidateReply' : ''">
                <p class="font-weight-light small-text"> <InterviewRequestCandidateReplyMessage /> </p>
            </div>

            <div v-else-if="unreadNotification ? unreadNotification.type === 'App\\Notifications\\InterviewRequestReplyConfirmed' : ''">
                <p class="font-weight-light small-text"> <InterviewRequestReplyConfirmedMessage /> </p>
            </div>
        </div>
    </a>
</li>

methods: {

    markAsRead: async function() {
        try {
            const response = await employerService.markNotificationAsRead();
            this.loadNotificationsData();

            console.log(this.notifications);

        } catch (error) {
            this.$toast.error("Some error occurred, please refresh!");
        }
    },

},

employerService.js from code above:

export function markNotificationAsRead(id) {
    return http().post(`employer/notifications/${id}`);
}

In my @click="markAsRead() function I think I need to get the id so maybe something like this @click="markAsRead(unreadNotification.id). Now the tricky part and where I'm stuck is, how can I pass this id into the markNotificationAsRead() function below?

const response = await employerService.markNotificationAsRead();

I'm not sure how to do this. I'm using Laravel for my backend.

--------------------- UPDATE: ---------------------

Something strange is happening. I know that the answers provided should work, but for some reason it's still marking all records as read.

EmployerNotificationsController.php:

public function markAsRead($id)
    {
        $notifications = Auth::user()->notifications->where('id', $id)->first()->markAsRead();

        return response()->json($notifications, 200);
    }

api.php:

Route::post('/employer/notifications/{id}', 'EmployerNotificationsController@markAsRead')
->name('employer.notifications.mark-as-read');

Any ideas why?

Upvotes: 1

Views: 1761

Answers (2)

Nilson Jacques
Nilson Jacques

Reputation: 468

You're absolutely right about passing the ID to the click handler: @click="markAsRead(unreadNotification.id)

Your markAsRead method will receive the ID as an argument that you can then pass to your service method:

markAsRead: async function(id) {
  try {
    const response = await employerService.markNotificationAsRead(id);
     //... 
},

Upvotes: 1

chenc
chenc

Reputation: 331

<li class="dropdown-item preview-item dropdown-item-notifications" v-for="(unreadNotification, index) in unreadNotifications" :key="index">
    <a class="dropdown-item" type="button" @click="markAsRead(unreadNotification.id)">
        <div class="preview-item-content flex-grow py-2">
            <div v-if="unreadNotification ? unreadNotification.type === 'App\\Notifications\\InterviewRequestCandidateReply' : ''">
                <p class="font-weight-light small-text"> <InterviewRequestCandidateReplyMessage /> </p>
            </div>

            <div v-else-if="unreadNotification ? unreadNotification.type === 'App\\Notifications\\InterviewRequestReplyConfirmed' : ''">
                <p class="font-weight-light small-text"> <InterviewRequestReplyConfirmedMessage /> </p>
            </div>
        </div>
    </a>
</li>

methods: {

    markAsRead: async function(id) {
        try {
            const response = await employerService.markNotificationAsRead(id);
            this.loadNotificationsData();

            console.log(this.notifications);

        } catch (error) {
            this.$toast.error("Some error occurred, please refresh!");
        }
    },

},

just like this ...

Upvotes: 0

Related Questions