jqueryvue.jsdomsemantic-uifomantic-ui

vue js and jquery DOM manipulation


I wonder if anybody can give me advice how to approach the situation when I need to access DOM elements directly while I am also using VUE.JS.

I use Fomantic-UI framework (fork of dead Semantic UI). A creation an element takes some time 100ms(?) so the DOM element is not immediately accessible. And I need to call Fomantic method on it. Currently I use setTimeout for 100-200ms but I think this is not a right approach.

(This is not a problem of "mounted"!!! it is a "problem" of reactive response)

e.g. I load a new data. Based on the loaded data VUE creates a new DIV (Fomantic accordion) and then I need to activate it by calling a method on this DIV. If I do it straight away the DIV is still not there.

Any ideas how to approach it properly?


Solution

    1. Use MutationObserver and watch when a DOM element indicating the end of DOM creation for your accordeon.
    2. Use a first interaction of a user with your accordion and do all your bindings in that event handler.