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 () {
  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: parseInt(el.dataset.notificationId),
            buttonClass: el.dataset.buttonClass,
            buttonNoText: "false" === el.dataset.buttonText,
            showUrl: el.dataset.showButtonUrl,
            isRead: 1 === Number.parseInt(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);
    });
});