Fix nested x-for loop scoping

[calebporzio]

This is now possible:

<div x-data="{ foos: [{bars: [{bobs: ['one', 'two']}, {bobs: ['three', 'four']}]}, {bars: [{bobs: ['five', 'six']}, {bobs: ['seven', 'eight']}]}] }">
    <template x-for="foo in foos">
        <div>
            <template x-for="bar in foo.bars">
                <div>
                    <template x-for="bob in bar.bobs">
                        <span x-text="bob"></span>
                    </template>
                </div>
            </template>
        </div>
    </template>
</div>

(This outputs:)

[husayt]

@calebporzio How do you access foo or bar inside the last x-for?

[husayt]

seems my last question is not supported yet and waiting for this to merge

[timohoelzer]

Any updates on nesting.

Try to do something like the following which seams a practical case to me.
https://codepen.io/tatundkraft/pen/4f34ad6768ec85652a57939b3cbf6572?editors=1001

Creating a new x-data within x-for makes foo unreachable.

Am I missing something?

Many thanks in advance.

[SimoTod]

That use case is not supported. Nested components cannot communicate with the parent components.
The fact that a component is inside an x-for is not relevant, you would get a similar error with

<div x-data="{product: { name:'Product 1', images:[1,2] }]">
    <div x-data="product">
        ...
    </div>
</div>

As long as you define a new x-data attribute, that component creates its own standalone scope. You can have a look at spruce if you need your components to share a common state