notification: small vue component to toggle read status of a notification

src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js

@@ -0,0 +1,38 @@
+import {createApp} from "vue";
+import NotificationReadToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadToggle.vue";
+
+const App = {
+    template: '<notification-read-toggle ' +
+        ':notificationId="notificationId" ' +
+        ':isRead="isRead"' +
+        '@markRead="onMarkRead" @markUnread="onMarkUnread"' +
+        '></notification-read-toggle>',
+    components: {
+        NotificationReadToggle,
+    },
+    methods: {
+        onMarkRead() {
+            this.isRead = true;
+        },
+        onMarkUnread() {
+            this.isRead = false;
+        },
+    }
+}
+
+window.addEventListener('DOMContentLoaded', function (e) {
+    document.querySelectorAll('.notification_toggle_read_status')
+        .forEach(function (app) {
+            console.log('app', app);
+            const myApp = Object.assign(App, {
+                data() {
+                    return {
+                        notificationId: +app.dataset.notificationId,
+                        isRead: 1 === +app.dataset.notificationCurrentIsRead,
+                    }
+                }
+            })
+
+            createApp(myApp).mount(app);
+        });
+})