Nested data & refs lead to Alpine Expression Error: $refs.myReference is undefined

[ravage84]

Alpine.js 3.8.0 + 3.8.1:
Current FF & Chrome, verified in CodePen.

According to the documetnation pages about state and data Alpine supports nested data or components.

But either I have missed something in the documetnation or I have hit an unsupported case.

Simplified example works without nested data/refs
Simplified example breaks even with an empty nested data & the same refs
This would be the simplified end goal

I guess the issue is that while the x-ref for country code is within the nested component, the x-show for it is in the outer/parent.

If this is not considered a bug or missing functionality (and thus would be implemented), how should one implement this in the cleanest fashion?

[SimoTod]

You don't need $ref for those examples. You are trying to reimplement x-model.

[ravage84]

@SimoTod whilte I have to agree about "reimplement[ing] x-model", I think it should work nonetheless, shouldn't it?

[SimoTod]

@ravage84
not with the current implementation. The parent component can't see an x-ref defined in a child component (same for properties).

<div x-data>
   <span x-text="foo"></span> <!-- Not working -->
   <span x-text="$refs.foo.innerText"></span> <!-- Not working -->
   <div x-data="{foo: bar}">
      <div x-ref="foo">bar</div>
   </div>
</div>

vs

<div x-data="{foo: bar}">
    <div x-ref="foo">bar</div>
    <div x-data>
        <span x-text="foo"></span> <!-- OK -->
        <span x-text="$refs.foo.innerText"></span> <!-- OK -->
   </div>
</div>

The relationship between parents and children is one-to-many: A child component only have one parent but a parent component can have as many children as needed so the reference would be ambiguous.

[xiaohui-zhangxh]

this is really a problem, do you find a way to fix this?

[SimoTod]

What are you trying to achieve. It's the same as normal properties, a parent component cannot see the properties defined in a child component. Likewise, a parent component cannot see the ref defined in a child component (otherwise different children could use the same ref name and override each other).

[xiaohui-zhangxh]

like this

<div x-data>
   <span x-text="foo"></span> <!-- Not working -->
   <span @click="$refs.popperRoot.innerText">Change me</span> <!-- Not working -->
   <div x-data="popper()">
      <div x-ref="popperRoot">bar</div>
   </div>
</div>

in inner x-data popper() defines popperRoot x-ref, outter x-data wants to change popperRoot's content.

I got this solution:

<div x-data x-id="['popper-root']">
   <span x-text="foo"></span> <!-- Not working -->
   <span @click="document.getElementById($id('popper-root')).innerText">Change me</span> <!-- Not working -->
   <div x-data="popper()">
      <div x-ref="popperRoot" :id="$id('popper-root')">bar</div>
   </div>
</div>

[ekwoka]

You should pass a variable down

that the popper consumes with x-text

<div x-data="{ foo: 'bar' }">
   <span @click="foo = 'buzz'">Change me</span> <!-- Not working -->
   <div x-data="popper">
      <div x-text="foo">bar</div>
   </div>
</div>

Data moves down. So pass the data down.