Reactive parent x-data in child x-data

[jimafisk]

I was hoping that changes to parent data values could cascade to modified child values:

<div x-data="{age: 2}">
  <input type="number" x-model="age">
  <div x-text="'Age: ' + age"></div>
  <div x-data="{age: age * 2}" x-text="'Double: ' + age"></div>
</div>

But that throws:

"Alpine Error: 'ReferenceError: age is not defined'

Is there a way to accomplish something similar to this?

Obviously you could change <div x-data="{age: age * 2}" x-text="'Double: ' + age"></div> to <div x-text="'Double: ' + age * 2"></div>, but that doesn't take into consideration further nested markup that builds on the modified value.

Similar conversations:

• Need to access parent data and create child data based on parent data. #3718
• https://stackoverflow.com/questions/76780814/why-alpine-js-magic-inside-x-data-isnt-reactive

Thank you!

[SimoTod]

x-data is not reactive. it gets evaluated once at init. When you define a property, that is just a value from that point. To define it in data as a reactive value you need to use a function (or in your case you probably want to use a getter) so the value gets evaluated when used and stay reactive:

<div x-data="{age: 2}">
  <input type="number" x-model="age">
  <div x-text="'Age: ' + age"></div>
  <div x-data="{get age() { return age * 2 } }" x-text="'Double: ' + age"></div>
</div>

[jimafisk]

Thanks for the response @SimoTod! For some reason I'm still getting:

"Alpine Error: 'ReferenceError: age is not defined'

It seems like I can't reference age in the getter? I tried using this.age, but that seems to throw:

"Alpine Error: 'RangeError: Maximum call stack size exceeded'

Any ideas? Thank you!

[ekwoka]

Ideally you'd use a different name to avoid these issues.

[jimafisk]

Hi @ekwoka,

Can you share an example? It seems like referencing the parent x-data in the getter function is the issue. I still get the ReferenceError with:

<div x-data="{age: 2}">
  <input type="number" x-model="age">
  <div x-text="'Age: ' + age"></div>
  <div x-data="{get doubleAge() { return age * 2 } }">
    <div x-text="'Double: ' + doubleAge"></div>
  </div>
</div>

Thanks!

[ekwoka]

That itself is strange.

You'd use this.age inside those methods, but it sure feels like it should capture the outside variable...

[jimafisk]

Oh wait, it looks like the codepen I was using was referencing a CDN of an older version of Apline 🤦. Sorry for the confusion, @SimoTod's example above indeed works! Thanks for all the help!