Имеется страница, на которой есть кнопка, открывающая модальное окно.
Контент модального окна подгружается через AJAX и содержимое ответа (HTML) вставляется в DOM.
В этом HTML содержатся некоторые Vue-компоненты (компонент комменатриев).
Как грамотно инстанцировать этот Vue-компонент?
Текущая реализацияimport Vue from "vue";
import Comments from "./components/comments.vue";
import {listenDomForElement} from "./../../common/helpers";
'use strict';
/** Variables */
let commentsBlockVm,
vueElement = '#comments-block';
/** Комментарии */
commentsBlockVm = new Vue({
name: 'comments-block',
components: {Comments},
});
/** Специальный хелпер, слушающий DOM (MutationObserver) */
listenDomForElement(vueElement, function (element) {
// Коллбэк исполнится, когда элемент появится в DOM
// Маунтим Vue инстанс к нужному элементу
commentsBlockVm.$mount(element);
// Без этого компонент нормально не работает
window.commentsBlockVm = commentsBlockVm;
});
export {commentsBlockVm}
Девтулз пуст.
При текущей реализации в Vue DevTools я не вижу этого компонента, вероятно из-за того, что девтулз инициализируется только при загрузке страницы.
Как правильно решить эту задачу или хотя бы заставить девтулз видеть этот компонент?
Доки читал, единственное, что близко к решение - хуки жизненного цикла, но не уверен.
Спасибо.
