:x-ref on dynamic items not added to main this.$refs ?

[yabdab]

So I have a setup to display dynamic items loaded via fetch. I use the :x-ref="someRef".
In v3 I can no longer do this. I checked and the main this.$refs in my data() does not reflect any dynamic refs added after page loads.

[KevinBatdorf]

If you console.log the $refs is name there? Can you make a demo?

edit: Shouldn't this be a discussion instead of an issue?

[ryangjchandler]

I believe this might be related to the cached x-ref results in 3.x.

[yabdab]

I believe this might be related to the cached x-ref results in 3.x.

Is there a way to refresh the cache of refs?

[KevinBatdorf]

I don't know why you're editing your initial post to make comments confusing, but following on my previous comment. I made a demo and it seems to be working. I used this code and it logged the expected element.

<div x-data="">
  <p x-ref="hello"></p>
  <button @click="() => {var myVar = 'hello'; console.log($refs[myVar])}">press</button>
</div>

Can you put up a demo where it's broken?

[yabdab]

Sorry @KevinBatdorf , did not mean to confuse. I just discovered the actual issue and wanted to update the title.

I read your thread in discord and it seems to be the same issue danjac has.

Your demo is static (not dynamic) so that is why it works.

Here is a demo of what does not work...

<template x-for="item in items" :key="item.id" >
<div :x-ref="item.name">
some content ...
</div>
</template>

[KevinBatdorf]

Oh I missed the binding part of your question. yeah you can't bind x-ref anymore. it was sort of a hack to begin with though I think (although useful). You may need a custom directive to handle that instead for now.

Could be a useful feature though. I would start a discussion on it and let people upvote to show demand.

[Drei109]

I was having a similar issue here #1590 (comment) . If x-ref is not allowed with bind anymore it should be explained on the docs, in the caveats section.

[yabdab]

OK. I will just use your suggestion from discord until I can revisit the issue...

let ref = document.querySelector('[x-ref="item-' + id + '"]');

[asaf]

can you elaborate this?

[KevinBatdorf]

Yeah, or something clunky like this would work too:

<div x-data="{foo: 'bar'}">
  <p x-ref="hey">Hey</p>
  <p x-init="() => {
    const $root = $el.closest('[x-data]')
    $root._x_refs || ($root._x_refs = {})
    $root._x_refs[foo] = $el
  }"></p>
  <button @click="console.log($refs)">press</button>
</div>

Which you may be able to abstract somehow.

https://codepen.io/KevinBatdorf/pen/vYxbgXL

[asaf]

this does not work when element is under <template> tag. any other suggestion?

[KevinBatdorf]

Hey. Open a new discussion and share a demo showing how you want to use it and I can take a look. I think there's a bug with walking injected HTML still so it could be related.

[asaf]

@keyurshah thanks!
see #1615

[yabdab]

THanks! So is it safe to assume other things cannot bind in templates now? Things like :href and :class ?

[KevinBatdorf]

So is it safe to assume other things cannot bind in templates now? Things like :href and :class ?

I don't think that's accurate at all. That's one of Alpine's core features.

I don't think Alpine directives were meant to be bound though. I haven't checked but binding other directives might also not produce the same behavior, like x-bind:x-transition="myFunc()". But it could still work. I just haven't tried it yet.

[calebporzio]

Yeah, x-ref isn't really meant to be bound - it needs to be processed BEFORE the data is available to evaluate the binding itself

[rupurt]

@KevinBatdorf @calebporzio this is really unintuative. The documentation indicates that it should work like document.querySelector

https://alpinejs.dev/directives/ref

x-ref in combination with $refs is a useful utility for easily accessing DOM elements directly. It's most useful as a replacement for APIs like getElementById and querySelector.

[mnabialek]

@calebporzio I had the same issue until I found this after upgrade to v3. It should be mentioned in upgrade guide (it was working fine in v2) and also mentioned in https://alpinejs.dev/directives/ref that it won't work for dynamically created elements.

[abdusco]

I easily lost an hour debugging why my dynamic :x-ref bindings weren't working. It used to work fine with v2.
I've fixed it with:

<input type='text' :x-ref="`rename-${file.relPath}`"/>
this won't automatically bind to $refs

async startRenaming(file) {
    this.renaming = {...file};
    await this.$nextTick(); // <-- make sure that the changes are flushed to DOM.
    this.$root.querySelector(`[x-ref="rename-${file.relPath}"]`).select();
},

[SimoTod]

Yeah, it doesn't work that way in v3. https://alpinejs.dev/upgrade-guide#x-ref-no-more-dynamic

[Sleepful]

@SimoTod it is so useful though, and the guide should mention how people should write their code to get the same behavior now that it won't work this way.

[SimoTod]

I think the doc is open source if anyone wants to send a PR. Just to clarify, I'm not the maintainer nor I'm involved in any design decisions (In case you tagged me for that reason).

[Sleepful]

Ah, right, sorry. I guess @calebporzio already mentioned that there's no intention in allowing x-ref to be bound, I suppose this is true for the other Alpine directives too. The magic would be very powerful though, it would avoid a lot of manually-typed javascript lines.

[unmeimusu]

The explanation of $refs from AlpineJS website need to be updated like example bellow.

<div x-data>
<!--wrapped inside dataless element to be worked-->
<button x-on:click="$refs.text.remove()">
    <!--remove selected DOM with JS-->
    Remove Text
</button>
<span x-ref="text">  
    Selected content here.
</span>
</div>

[ekwoka]

No it doesn't.

very few of the examples in the docs show the x-data when it isn't directly relevant to what is being told.

All directives need to be inside an x-data except for x-init which is explicitly explained in the documentation. Also that issue doesn't have anything to do with the topic here.

[unmeimusu]

No it doesn't.

very few of the examples in the docs show the x-data when it isn't directly relevant to what is being told.

All directives need to be inside an x-data except for x-init which is explicitly explained in the documentation. Also that issue doesn't have anything to do with the topic here.

I got it thanks to your explanation, it helps me to understand.