Hi all,
I am converting a dead view to a live view.
I render something like this from a function component (inside a form…)
~H"""
<div data-component="Foo">
<p>Something</p>
<div data-foo />
</div>
"""
I have a piece of js that executes Foo(el) where el is the div with data-component="Foo"
Foo(el) selects the data-foo element and use that to do things…
First thing I did to convert it to a live view, I replaced data-component with phx-hook and passed the hooks into the live socket, now the component renders something like:
~H"""
<div id="foo" phx-hook="Foo">
<p>Something</p>
<div data-foo />
</div>
"""
The hook just use the old code, something like:
export default {
mounted() {
Foo(this.el);
},
};
The mount is working fine and I see the data-foo div agumented with my js,
but every time I change the form (I have a phx-change="validate" callback active)
the component updates and I lose my js, (I see an empty <div data-foo />)
I’m missing some bits here, but don’t really know what’s the correct approach to solve this.
Any help?
Thank you
