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

[fschoenfeldt]

Discussed in #2097

^{Originally posted by fschoenfeldt September 21, 2021}
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" (?)

[marvinengelmann]

That still doesn't work, does it? Or is there another possibility to get element reference inside Alpine.data()?

[marvinengelmann]

Something like this.$refs.input.focus().

I mean, how do I get something like vuejs template refs?

[SimoTod]

That string should work unless you are defining your function in the wrong way and you lose this.
See https://codepen.io/SimoTod/pen/ZEapRbp

[marvinengelmann]

I have the input inside a x-if template and was trying to reference it from init(), that causes the reference to be undefined.
See https://codepen.io/marvinengelmann/pen/JjORaaW

[SimoTod]

Yeah, that won't work. You are trying to reference an element which might or might not be in the dom (html inside template tag is not parsed yet, x-if when evaluates to true, clones the node and append it after the template). If you know that the property evaluates to true, use $nextTick to defer the callback, however it's probably better to stick an x-init="$el.focus()" on the input itself.

[marvinengelmann]

Ah that makes sense, thank you!