How to dynamically update nested data with dependency on parent?

Question

I have nested alpine.js x-data tags, where the nested tag depends on the parent, like the following:

<div x-data="{foo: 1234}">
  <input x-model="foo" type="number">
  <div x-text="`foo = ${foo}`"></div>
  <div x-data="{bar: [foo*1, foo*2, foo*3]}">
    <template x-for="point in bar">
      <div x-text="point"></div>
    </template>
  </div>
</div>

At the moment, it starts okay, with the output showing:

However, upon changing the input, the bar values do not update:

Is it possible to have the nested x-data bar value update dynamically when foo is changed in the parent?

Here is a working example: https://codepen.io/manticorp/pen/RNPBrPK

Amir Popovich · Accepted Answer · 2025-06-16 09:53:07Z

1

You’re seeing this issue because Alpine’s x-data initializes once and doesn’t track changes from the parent scope.

You can define bar as the a computed getter in the parent x-data.

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

<div x-data="{
    foo: 1234,
    get bar() {
        return [this.foo * 1, this.foo * 2, this.foo * 3];
    }
}">
  <input x-model="foo" type="number">
  <div x-text="`foo = ${foo}`"></div>
  <template x-for="point in bar">
    <div x-text="point"></div>
  </template>
</div>

answered Jun 16 at 9:53

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harry Mustoe-Playfair Jun 16 at 10:02

That's fantastic, thank you!

Collectives™ on Stack Overflow

How to dynamically update nested data with dependency on parent?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related