$refs.myreference undefined

[capymind]

Hi, I need some help.
Thanks in advance for reading my silly question.

I am doing a side project with Flask(python) + htmx(ajax library) + alpine.js(wonderful library).
Although the code snippets below contain non-js code, it's not quite irrelevant. So please hold on.

My alpine component is following:

I'm sorry this kind of ugly presentation and code..

alpine-x-ref-after-ajax.mp4

But the point is that the purple square code added to DOM after the ajax(htmx) call is working correctly
in terms of that <button> with @click="asset=..." change <input> value with x-model.
However, x-ref seems not working in this case. I think I have to do the equivalent of htmx.process() in alpine.js way, but I'm not sure.

Sorry for long question. But any thought or comment will be helpful for me. Thanks for reading :)

[ekwoka]

It's a bit unclear since there is some abstraction there that isn't shown. I know htmx a bit.

the ref will be added to the nearest parent x-data when the element is added.

Might be helpful if you could show the actual html output from this, since alpine only cares about that, not the templating or how you get there.

if the @click is being registered, then Alpine has seen the elements there, so there isn't any reason to do initTree

[capymind]

I am sorry for bothering you because of poorly formatted question :(
Um.. I add actual html output below very long(60 seconds) video...

alpine-x-ref-after-ajax-3.mp4

I think @click is registered, but x-ref isn't, making me lost.
I have to dig into my wrong code with additional studying about DOM, htmx, alpine.js.
Thanks a lot for a kind and quick reply.

[SimoTod]

Is there a real use case or are you just experimenting? $refs uses internal caching so x-ref's that gets injected after the page load won't get found most of the time. Generally speaking, unless dealing with third party libraries or designing complex component, the use of x-ref is often a sing that you are doing something in the wrong way. Most of the time you just need a variable in x-data to drive your logic and all the required directives will use that one as a source of truth.

[capymind]

Thank you for concise and intuitive reply (although I don't understand what internal caching means exactly, that's my fault). 50/50 in terms of experimenting vs. real use case. I am not dealing with 3rd party nor designing complex component... You're definitely right. I think that I have to find ways to make code and logic simple not unnecessarily complex. It takes some time for the beginner like me :). Thanks!

[SimoTod]

No worries. Internal caching kind of means that $refs evaluates the x-ref's in page once and then it will not care if you add a new one later on which your framework may do.
If you have a simple version of the real use case, devs here will probably find it easier to help or advice for some cleaner implementation

[ekwoka]

Yes, I'm also on the side that x-ref is extremely rarely needed. Very few instances have I found a solution using x-ref to be better than one that avoids it (and even those it's minor).