x-for does not update browser if element nested in a reusable component #3447

peterswords · 2023-03-06T01:44:04Z

peterswords
Mar 6, 2023

When I use x-for over an array, nested elements update correctly when the array changes. However, if those nested elements are inside a reusable component defined using Alpine.data, they do not update.

In my real-world example these are complex nested components implementing expandable accordions and new data is fetched from a server. However, I've boiled it down to the bare essentials here so that the component definition is completely empty. A button click changes the content of the array from [x,y] to [a,b].

<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.js"></script>
</head>

<body x-data="{
    my_array: [{x:'x'},{x:'y'}],
    click() {
        this.my_array = [{x:'a'},{x:'b'}];
    }
}">

    <!-- Loop with plain div -->
    <template x-for="item in my_array">
        <div x-text="item.x"></div>
    </template>

    <!-- Loop with div nested inside component -->
    <template x-for="item in my_array">
        <div x-data="some_component" >
            <div x-text="item.x"></div>
        </div>
    </template>

    <button @click="click">Click me</button>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('some_component', () => ({}));
        });

    </script>
</body>
</html>

JSFiddle is here.
Initially the output looks like this, with two iterations over the array:

On clicking and replacing the array, the first iteration updates but the second does not:

EDIT:
If I parametrise the Alpine.data component with my data, everything works as expected:

...
    <template x-for="item in my_array">
        <div x-data="some_component(item)" >
            <div x-text="item.x"></div>
        </div>
    </template>
...
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('some_component', (i) => ({
                item: i,
            }));
        });

    </script>

Updated JSFiddle here.

This gives me a workaround I can live with. However, it forces me to choose the number of parameters that will be passed to the component, and I may have to repackage certain data used within it. In my real-world example, a generic accordion component doesn't really care about the sort of layout or associated data that will live inside it. It would be preferable if the nested components could see "through" the Alpine.data component to data contained in outer scopes. And it's also weird that the nested components can see outer data when first rendered, but don't see changes to those data.

ekwoka · 2023-03-06T04:59:01Z

ekwoka
Mar 6, 2023

Check with keys on the x-fors please. That is basically necessary for x-for and leaving it off will have strange behaviors

This should work fine even going through nested contexts, so check that first.

10 replies

ekwoka Mar 7, 2023

Inlining is meant to mean having the x-data be like x-data="{ foo: 'bar' }"

That also breaks it.

What does solve it is doing something like

{ item } (in the x data, where you pass the object in more explicitly.

peterswords Mar 7, 2023
Author

@ekwoka , then I'm misunderstanding. All of my examples are inlined:

<body x-data="{
    my_array: [{x:'x', k:1},{x:'y', k:2}],
    click() {
        this.my_array = [{x:'a', k:3},{x:'b', k:4}];
    }
}">

The problem I'm running up against occurs when I try to use that data in a div that happens to be sandwiched inside another (extracted) component. The extracted component has no data, inline or otherwise.

Could you post a complete example of where you say inlining breaks it?

ekwoka Mar 7, 2023

I mean for the looped component.

not the parent.

 <template x-for="item in my_array" :key="item.k">
        <div x-data="{ foo: 'bar' }" >
            <div x-text="item.x"></div>
        </div>
    </template>

peterswords Mar 7, 2023
Author

Ahh, ok, now I get it. I thought the problem was that I was using a nested "extracted" component using Alpine.data. But now I see that it's caused by any intervening component with its own x-data. And yes, I see that with this scenario changes to the outer array are only reflected if you change keys, not if you replace the entire array but don't change keys.

You are no doubt ahead of me here, but it would seem that the outer data context is somehow copied into the inner one and only certain types of change propagate from outer to inner. In any case, something is different depending on whether there is an intervening context.

ekwoka Mar 7, 2023

Yeah, it basically seems that the process of copying the outer looped scope to the inner does not happen on changes. It basically just does is the key same? okay leave it It might be a simple fix. I'll try to find it.

miquelbrazil · 2023-03-31T15:13:56Z

miquelbrazil
Mar 31, 2023

I feel like I'm experiencing an issue similar to this, but with x-if.

7 replies

ekwoka Apr 20, 2023

Yes, x-data shouldn't be on the template tag itself.

shashank-brightness Feb 20, 2024

@ekwoka
I am facing similar issue after initializing alpine manually in a shadow dom (without shadow dom works fine). I have also kept key in both templates outer and inner still when i try to change array, dom is not updating. If i only keep single loop and instead of x-if within 2nd loop, use as x-show on child div, it also works fine at that time as well.

<template x-for="shape in shapes" :key="shape.id">
  <template x-if="shape.type === 'motive'" :key="shape.id">
      <div class="col-4 mb-2  text-center position-relative editor-interface__hover__remove" :class="shape.hidden ? 'd-none': ''">
      </div>
  </template>
</template>

Also if I take one inner div before child template, it still works fine as well but this structure is not something i need. I need col-4 as direct child of upper template,

<template x-for="shape in shapes" :key="shape.id">
  <div>
    <template x-if="shape.type === 'motive'" :key="shape.id">
        <div class="col-4 mb-2  text-center position-relative editor-interface__hover__remove" :class="shape.hidden ? 'd-none': ''">
        </div>
    </template>
  </div>
</template>

but not with nested templates like the above shown in 1st example. Can you tell what is missing if first structure is within shadow dom and alpine was init manually as i said before?

ekwoka Feb 20, 2024

You cannot put template as a child of a template.

So there are 2 ways to generally handle this

Recommended one for yours:

Just use a filter on for

x-for="thing in things.filter(thing => thing.stuff = 'whatever')"

Alternatively, a way to handle this and multi child templates in a way the layout can work with:

Add display: contents to the wrapping div of the inner template.

shashank-brightness Feb 20, 2024

Okay I got it worked. Thanks for the quick help. I was not aware that we can even filter array within x-for itself in a syntax and also that root must not be template but anything else than that. May be better to add this example to docs.

ekwoka Feb 20, 2024

The rule about the templates is in the docs, I'm pretty sure, and Alpine expressions are JavaScript. So....you can write any JavaScript in them.

ekwoka · 2023-04-01T17:29:22Z

ekwoka
Apr 1, 2023

@peterswords

Fix in #3504

1 reply

peterswords Apr 2, 2023
Author

@ekwoka Many thanks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

x-for does not update browser if element nested in a reusable component #3447

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 18 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

x-for does not update browser if element nested in a reusable component #3447

Replies: 3 comments · 18 replies

peterswords Mar 7, 2023 Author

peterswords Mar 7, 2023 Author

peterswords Apr 2, 2023 Author

Replies: 3 comments 18 replies

peterswords Mar 7, 2023
Author

peterswords Mar 7, 2023
Author

peterswords Apr 2, 2023
Author