Компонент JavaScript не работает при выпуске несколько раз на одной странице ⇐ Javascript

[Anonymous]

Я пытаюсь превратить функциональность JavaScript в компоненты. Мой код до сих пор (снижен для ясности): < /p>
index.html
Modal 1
Modal 2
< /code>
app.js
import cmpModal from "./components/cmp-modal";

export const componentScripts = {
cmpModal: cmpModal,
}

document.addEventListener('DOMContentLoaded', () =>
{
// find all elements with component attribute
const componentElements = document.querySelectorAll('[data-component]');

// iterate over all component elements
for (const el of componentElements) {
let componentName = el.getAttribute('data-component');

// get the script that matches the component
let componentScript = componentScripts[componentName];

// if the script exists, fire the init
if (typeof componentScript != 'undefined') {
componentScript.init(el);
}
}
});
< /code>
cmp-modal.js
const cmpModal = {
component: null,

/**
* Initialise the component
* @param element
*/
init: function (element)
{
const _ = this;
_.component = element;
console.log(_);
}
}

export default cmpModal;
< /code>
Проблема, которая у меня есть, заключается только в файле cmp-modal.js. Поскольку у меня есть два модала на странице, я ожидаю, что консоль будет регистрировать компонент дважды, по одному для каждого, но я ожидаю, что идентификатор в журнале будет отличаться. Похоже, это так

Однако, когда я расширяю журналы, я вижу, что оба взяли на себя идентификатор последнего модала. То же самое относится и к другим свойствам. Оба журнала отражают свойства последнего модального. " /> < /p>
Что я здесь делаю не так? Как я могу сохранить каждый экземпляр модального объекта изолированным только к этому модалу?

Подробнее здесь: https://stackoverflow.com/questions/794 ... n-one-page