[BUG] The opened Treeview menu won't collapse when the Treeview was initiated more than once

Hi guys, I run Adminlte with Laravel using Inertiajs with Vue (SPA). the app is loading the adminlte on the login page so after logging in and being redirected to the dashboard the treeview needs to be initiated. I initiate the treeview with this:

$('[data-widget="treeview"]').each(function () { adminlte.Treeview._jQueryInterface.call($(this), 'init') })

and then the treeview is working properly.

but, the problem is when I refresh the page on the dashboard, the treeview can open but won’t collapse.

I think it’s because the treeview init runs more than once, first when the page refreshed and then when my code initiates the treeview again. how to check whether the treeview was initiated or not?, so I can condition my code to only run when the treeview is not initiated yet, or is there any other solution with this?, sorry for my bad English, I appreciate the help.

[ImCreator2]

faced same problem while working with laravel & Vue 3 with inertiajs. found a fix for this after working it on 3 days, please checkout.

Add below lines in <script setup> of Vue component.

import { onMounted, onUnmounted } from "vue";

onMounted( () => {
    $('[data-widget = "treeview"]').Treeview('init');
    // $('#mainSidebar').Treeview('init');

    console.log('Main sidebar mounted.');
})

onUnmounted(() => {
    $(document).on('click','[data-widget="treeview"] .nav-link', function (e) {
        e.stopImmediatePropagation();
    });

    console.log('Treeview stopped.');
})

Hope this works for others too.

[galihsetyo]

Update: there is still a problem with the code above, so here is my solution, so I make a function to initiate the TreeView in app.js:

let treeViewInit = function(){
    $('[data-widget="treeview"]').each(function () {
        adminlte.Treeview._jQueryInterface.call(
            $(this),
            "init"
        );
    });
}

and run that function with the Lodash once function:

let treeViewInitOnce = _.once(treeViewInit);

after that, I make a global property to call that Lodash function:

createInertiaApp({
    resolve: name => import(`./Pages/${name}`),
    title: title => title ? `${title} - Walisongo` : 'Walisongo',
    setup({ el, App, props, plugin }) {
        const myApp = createApp({ render: () => h(App, props) })
            .use(plugin)
            .mixin({ methods: {} })

        myApp.config.globalProperties.$treeViewInitOnce = treeViewInitOnce;

        myApp.mount(el);

        return myApp;
    },
})

and then I use that in my component:

let _this = this;

let treeView;
$(window).on('load.lte.treeview', function (e) {
    treeView = e;
});

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);

        if(treeView == undefined) {
            _this.$treeViewInitOnce();
        }
    }
}, 10);