this.$refs doesn't have any DOM-Elements anymore

[fschoenfeldt]

So far, I was able to use this.$refs to get a key-value object of DOM-Elements:

<div x-data="myData">
  <div x-ref="foo" @click="clickToggle"></div>
  <div x-ref="bar" @click="clickToggle"></div>
</div>

document.addEventListener("alpine:init", () => {
  Alpine.data("myData", () => {
      clickToggle() {
          console.log(this.$refs)
      }
  });
});

Expected Output

Something along the lines of

{
  foo: DOMElement,
  bar: DOMElement
}

Actual

After 3.3.4, I get something like a an empty "Proxy" (?)

[Tim-Wils]

Try this:
console.log(this.$root._x_refs);

[Tim-Wils]

I think you have to use the key directly so that Alpine wil return the value instead of the Proxy object like this: console.log(this.$refs.foo). Dont know if returning the Proxy object with this.$refs is intended. My solution is the way it’s stored under the hood :)

[fschoenfeldt]

@calebporzio can you tell me if the above is true? It's not issue to refactor my scripts to just use this "new" interface but it sounds like an unintended side effect of an update, hence I opened a bug ticket.

[SimoTod]

It's intended, see https://github.com/alpinejs/alpine/pull/2077/files. $refs is now a proxy object to allow children to access references defined in a parent component. If you call this.$refs.foo you will still get the expected element.

You can get the list of refs using the internal property as Tim suggested (_x_refs) but it's not a public API so it could change at any time (so if it broke, it wouldn't be a bug). You might as well use this.$el.querySelectorAll('x-ref') at that point if you need it.

I don't think $refs was ever meant to be accessed as a generic list of all references: it was not working like that in v2, it did work in v3 for a while by coincidence but the docs don't suggest that usage.

[calebporzio]

Thanks for the explanation @SimoTod

[fschoenfeldt]

Thanks for the explanation :)

With this.$root.querySelectorAll('[x-ref]') I'm sure I can refactor my code. It might even be better because it's a DOM-List and not those weird key-value pairs anymore. Thank you!