accessing this.prop if not defined on x-data will lead to global var

[robkuz]

This is not really a bug report but more a request for documentation refinement.

I was creating a component like this the other day

< ... x-data="{foo: 1, bar: 'bar', init() {this.value = this.foo}}" ... />

This worked pretty fine

except when I created a second (same) component some days later I run in a host of errors that perplexed me totally and cost me the better part of an afternoon.

The issue is that when I set a property within an function within a x-data structure and that particular property IS NOT defined as part of the x-data declaration, then setting said property will lead to the creation/setting of a global JS variable with the same name and then If I have multiple components that do that they will share the values of said global variable.

Like I said this is not necessarily a bug but at least a behavior that should be documented and even prominently stated

thx

[SimoTod]

Do you have an example to replicate. It works as expected for me: https://codepen.io/SimoTod/pen/yyBRgRV
In general, it's better to always set a default empty state for your variable as there could be a directive trying to access your variable before init finishes (for example, it's waiting for a promise to resolve or similar cases).

[robkuz]

ha, I extended your example

<div x-data="{foo: 1, bar: 'bar', init() {this.value = this.foo}, wert(){return this.value}, onclick(){this.value++}}">
    <button @click="onclick()" x-text="wert()"></button>
</div>

<div x-data="{init() {this.value = 2}, wert(){return this.value}, onclick(){this.value++}}">
    <button @click="onclick()" x-text="wert()"></button>
</div>

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.14.8/cdn.js"></script> 

and what can I say. It worked :-(

I swear to you my example was very similar to this one except I was using this.value = new Set([some_init_vals])

and if I did this my value was shared between both components

[ekwoka]

It's likely that you used value = and not this.value = in that case.