Using loop variable inside another Component

[Javiani]

Hey guys,

First of all, nicely done!, I was looking for this for a very long time!!! Thanks for sharing this work.
I had a question about petite-vue in a particular scenario.

What if I had something like this:

<div v-scope="A({ items: [1,2,3] })">
    <h2>A</h2>
    <div v-for="item in items">
        <div v-scope="B({ title: 'MyTitle' })">
            <p>{{ title }}</p>
            <span>{{item}}</span> <!-- How can I get this? -->
        </div>
    </div>
</div>

Is there a way I can share that item variable created in the for loop inside the other component?

Thanks a lot!

[halivert]

It works

https://codi.link/PG1haW4+CiAgICA8ZGl2IHYtc2NvcGU9IkEoeyBpdGVtczogWzEsMiwzXSB9KSI+CiAgICAgICAgPGgyPkE8L2gyPgogICAgICAgIDxkaXYgdi1mb3I9Iml0ZW0gaW4gaXRlbXMiPgogICAgICAgICAgICA8ZGl2IHYtc2NvcGU9IkIoeyB0aXRsZTogJ015VGl0bGUnIH0pIj4KICAgICAgICAgICAgICAgIDxwPnt7IHRpdGxlIH19PC9wPgogICAgICAgICAgICAgICAgPHNwYW4+e3tpdGVtfX08L3NwYW4+IDwhLS0gSG93IGNhbiBJIGdldCB0aGlzPyAtLT4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KPC9tYWluPg==||aW1wb3J0IHsgY3JlYXRlQXBwIH0gZnJvbSAnaHR0cHM6Ly91bnBrZy5jb20vcGV0aXRlLXZ1ZT9tb2R1bGUnCgpjcmVhdGVBcHAoewogICAgQTogKHtpdGVtc30pID0+IHsKICAgICAgICByZXR1cm4gewogICAgICAgICAgICBpdGVtcywKICAgICAgICB9CiAgICB9LAogICAgQjogKHt0aXRsZX0pID0+IHsKICAgICAgICByZXR1cm4gewogICAgICAgICAgICB0aXRsZSwKICAgICAgICB9CiAgICB9LAp9KS5tb3VudCgibWFpbiIpOwo=

[Javiani]

Nice! I think I did something wrong when I was testing it!
Thanks for your time!

[halivert]

You're welcome 😌

[nooooooom]

You can use v-effect to collect values and then use them.