vue js and jquery DOM manipulation

Question

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?

Answer 1

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.