Skip to content
Snippets Groups Projects
Commit cfa077b5 authored by Laurent Lecluse's avatar Laurent Lecluse
Browse files

[Fix] Les composants Vue sont aussi chargés à l'intérieur de HTML renvoyé en Ajax

parent 58a7d96b
Branches
Tags 6.2.6
No related merge requests found
Pipeline #33583 passed
CHANGELOG CHANGELOG
========= =========
6.2.6 (07/01/2025)
------------------
- [Fix] Les composants Vue sont aussi chargés à l'intérieur de HTML renvoyé en Ajax
6.2.5 (19/09/2024) 6.2.5 (19/09/2024)
------------------ ------------------
......
import {createApp} from 'vue'; import {createApp} from 'vue';
import {createBootstrap} from 'bootstrap-vue-next'; import {createBootstrap} from 'bootstrap-vue-next';
// on met en place le client d'UnicaenVue
import unicaenVue from './unicaenVue'; import unicaenVue from './unicaenVue';
function init(vues, options) function init(vues, options)
{ {
const components = {} const components = {};
if (undefined === options) { if (undefined === options) {
options = {}; options = {};
} }
// Convertir les chemins des composants en noms de composants
for (const path in vues) { for (const path in vues) {
let compPath = path.slice(2, -4); let compPath = path.slice(2, -4);
let compName = compPath.replaceAll('/', ''); let compName = compPath.replaceAll('/', '');
components[compName] = vues[path].default; components[compName] = vues[path].default;
} }
// instantiate the Vue apps // Fonction pour initialiser une application Vue sur un élément
// Note our lookup is a wrapping div with .vue-app class function mountVueApp(el)
for (const el of document.getElementsByClassName('vue-app')) { {
let app = createApp({ let app = createApp({
template: el.innerHTML, template: el.innerHTML,
components: components components: components
...@@ -31,24 +29,48 @@ function init(vues, options) ...@@ -31,24 +29,48 @@ function init(vues, options)
options.beforeMount(app); options.beforeMount(app);
} }
//autoload de tous les composants déclarés // Autoload des composants déclarés
if (undefined !== options.autoloads) { if (undefined !== options.autoloads) {
for (const alias in options.autoloads) { for (const alias in options.autoloads) {
let compName = options.autoloads[alias].replaceAll('/', ''); let compName = options.autoloads[alias].replaceAll('/', '');
app.component(alias, components[compName]); app.component(alias, components[compName]);
} }
} }
app.use(createBootstrap({components: true, directives: true})) app.use(createBootstrap({components: true, directives: true}));
app.mount(el); app.mount(el);
if (undefined !== options.afterMount) { if (undefined !== options.afterMount) {
options.afterMount(app); options.afterMount(app);
} }
} }
// Initialiser les applications Vue sur les éléments existants
for (const el of document.getElementsByClassName('vue-app')) {
mountVueApp(el);
}
// Observer les changements du DOM pour détecter les nouveaux éléments chargés en AJAX
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
// Vérifier si de nouveaux éléments avec la classe .vue-app ont été ajoutés
for (const node of mutation.addedNodes) {
if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('vue-app')) {
mountVueApp(node);
}
}
}
}
});
// Démarrer l'observation du DOM
observer.observe(document.body, {
childList: true, // Observer les ajouts/suppressions d'enfants
subtree: true, // Observer tout le sous-arbre du DOM
});
} }
export default { export default {
init init
} };
\ No newline at end of file \ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment