naja in Vue instance, works only for first attempt

[emololftw]

Dear community,

in my vue instance i have ajax link to signal in Nette application:

<div id="app">
  <div n:snippet="abc">
    ...
      <a n:href="add!" class="ajax">refresh</a>
  </div>
</div>

when i remount vue instance for refreshing components after dom update. Signal link stopped works. Is there any opinion how to reinitialize naja's elements?

I tried naja.initialize() in complete najas event but throws error about naja is initialized yet.

Application works correctly when i put my signal link out of Vue instance like:

<a n:href="add!" class="ajax">refresh</a>
<div id="app">
  <div n:snippet="abc">
    ...
  </div>
</div>

Thank you.

[emololftw]

At this moment its working with:

naja.addEventListener("complete", () => {
    const element = document.getElementById("app")
    const factory = createApp(App)
    factory.mount(element)
    element.querySelectorAll(naja.uiHandler.selector).forEach((i) => naja.uiHandler.bindUI(i))
})

[jiripudil]

Hi, I don't really know about Vue and how it integrates with Nette, but I suspect that Vue overrides the DOM with its own elements. If that is the case, then your solution seems to be the right one. I'll only add a tiny enhancement: you can just call naja.uiHandler.bindUI(element). It internally searches the element for all children matching the configured selector and binds the handler onto all of them.

[emololftw]

I came back to this problem after almost a year and a half and finally found an elegant solution to reinitialize vue components inside a snippet thanks to my experience.

I had also problem with redrawing vue components inside snippets. This is universal solution for both situations:

let snippetInstances = {}

naja.snippetHandler.addEventListener('beforeUpdate', (event) => {
    const id = event.detail.snippet.id;
    let instance = snippetInstances[id] ?? null;
    if (instance) {
        instance.unmount();
    }
})

naja.snippetHandler.addEventListener('afterUpdate', (event) => {
    const el = event.detail.snippet;
    let instance = createMyApp(el.id);
    snippetInstances[el.id] = instance;
    instance.mount(el);
})

[jiripudil]

Hi, glad to hear that. Thanks a lot for coming back and posting the solution for others who might stumble upon a similar issue