$root not returning the root

[AlexanderBoenninger]

Hey
My Problem: I need to toggle a container outside the scope. Therefor, I use the $root magic. But it turns out to just return the $el not the $root.
Am I using it wrong?

I have [email protected] installed.

<div id="root" x-data="{ active: null }" x-init="console.log('Root initialized:', $el)">
<div>
    <div>
        <div id="notRoot" x-data="{
                id: 1,
                get expanded() {
                    console.log('Current Element:', $el);
                    console.log('Root Element:', $root);
                    return $root.active === this.id;
                },
                set expanded(value) {
                    console.log('Setting active on Root:', $root);
                    $root.active = value ? this.id : null;
                }
            }">
            <button x-on:click="expanded = !expanded" :aria-expanded="expanded">
                Button
            </button>
        </div>
    </div>
    <div x-show="active === 1" x-collapse>
        hello world
    </div>
</div>

Log:

Root initialized: 
<div id="root" x-data="{ active: null }" x-init="console.log('Root initialized:', $el)">

Current Element: 
<div id="notRoot" x-data="{\n                    i…   }\n                }">

Root Element: 
<div id="notRoot" x-data="{\n                    i…   }\n                }">

[SimoTod]

$root return the closest element having x-data, starting from the element itself so it works as expected since you have x-data on your div#notRoot

As a separate note, you don't need $root, the child component has direct access to the parent properties

get expanded() {
    return this.active === this.id;
},
set expanded(value) {
    this.active = value ? this.id : null;
}

[AlexanderBoenninger]

Ah so it basically makes no sence to use $root inside an x-data attr.
With "this" I am using it normally.

I was hoping to somehow target the div#root Element.
Is there any way? Because – as I described. My toggle container is outside the scope of the element

[SimoTod]

<div id="root" x-data="{ active: null }" x-init="console.log('Root initialized:', $el)">
<div>
    <div>
        <div id="notRoot" x-data="{
                id: 1,
                get expanded() {
                    return this.active === this.id;
                },
                set expanded(value) {
                    this.active = value ? this.id : null;
                }
            }">
            <button x-on:click="expanded = !expanded" :aria-expanded="expanded">
                Button
            </button>
        </div>
    </div>
    <div x-show="active === 1" x-collapse>
        hello world
    </div>
</div>

[ekwoka]

As mentioned you're just expecting it to work differently.

It returns the ELEMENT, not the state there, also, you were using directly $el and $root in the function, which would both refer to the element that x-data is on. using this.$el would refer to the element the function is being called from.

You could do this.active which would be necessary for defining the x-data outside of this, but you can also do active right there in the x-data expression since that will refer to only the parenting scope.

[AlexanderBoenninger]

Ah It works now. Easier than expected.
Thanks a lot for answering!