chill-bundles/src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js

import {createApp} from "vue";
import NotificationReadToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadToggle.vue";
import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";

const i18n = _createI18n({});

window.addEventListener('DOMContentLoaded', function (e) {
    document.querySelectorAll('.notification_toggle_read_status')
        .forEach(function (el, i) {
            createApp({
                template: '<notification-read-toggle ' +
                    ':notificationId="notificationId" ' +
                    ':buttonClass="buttonClass" ' +
                    ':buttonNoText="buttonNoText" ' +
                    ':showUrl="showUrl" ' +
                    ':isRead="isRead"' +
                    '@markRead="onMarkRead" @markUnread="onMarkUnread"' +
                    '></notification-read-toggle>',
                components: {
                    NotificationReadToggle,
                },
                data() {
                    return {
                        notificationId: +el.dataset.notificationId,
                        buttonClass: el.dataset.buttonClass,
                        buttonNoText: 'false' === el.dataset.buttonText,
                        showUrl: el.dataset.showButtonUrl,
                        isRead: 1 === +el.dataset.notificationCurrentIsRead,
                        container: el.dataset.container
                    }
                },
                computed: {
                    getContainer() {
                        return document.querySelectorAll('div.' + this.container);
                    }
                },
                methods: {
                    onMarkRead() {
                        if (typeof this.getContainer[i] !== 'undefined') {
                            this.getContainer[i].classList.replace('read', 'unread');
                        } else { throw 'data-container attribute is missing' }
                        this.isRead = false;
                    },
                    onMarkUnread() {
                        if (typeof this.getContainer[i] !== 'undefined') {
                            this.getContainer[i].classList.replace('unread', 'read');
                        } else { throw 'data-container attribute is missing' }
                        this.isRead = true;
                    },
                }
            })
            .use(i18n)
            .mount(el);
        });
});