Can't find variable when using subcomponent

[joostvanhoof]

I was in doubt whether this should go under Livewire or AlpineJS, but I think it's the latter.

My setup is like this:

In a blade view example.blade.php somewhere in the galaxy:

<div x-data="{
@foreach($posts as $post)
  postActiveId{{ $post->id }}: false,
@endforeach
}"

  <div x-show="postActiveId1"></div> <! –– this works ––>

  <x-dashboard.test /> <! –– including a component here ––>

</div>

If I do the same x-show in the component dashboard.test that was included above:

<div x-show="postActiveId1"></div>

the functionality of x-show actually works, but I do get a Unhandled Promise Rejection: ReferenceError: Can't find variable: postActiveId1

The example.blade.php is a Livewire component so maybe that has to do with it. I tried adding wire:key="{{ $post->id }}" to the div in the dashboard.test component but that didn't resolve it.

[KevinBatdorf]

What's rendered to the markup inside x-data?

[KevinBatdorf]

Okay, just checking. It's throwing a Unhandled Promise Rejection: which means 1. A promise is being rejected for some reason, and 2 that rejection has a callback that is trying to access the component data but cannot.

Do you have more methods you didn't share or is everything via LIvewire?

It may be something you need to ask in the Livewire repo as people watching there have more knowledge of the internals.

[joostvanhoof]

Yeah it's a little tricky. Given that the first x-show works, but the second (within the component) doesn't made me think it was AlpineJS, but maybe indeed it's related to Livewire.

[joostvanhoof]

I know that @joshhanley is the man, and we've been discussing some AlpineJS + Livewire behaviour recently. Josh do you maybe have an idea what's happening here? As indicated I tried adding wire:key but that didn't resolve the issue. The weird things is that everything does work as expected. It seems like the x-show is executed first before x-data (because of rendering order?) and therefore it can't find the variables, but not sure this is how AlpineJS works.

[joostvanhoof]

Hmm it looks like it's not the component, outside of the component it happens as well. My guess is that because x-data is built dynamically it's called with x-show before it's done rendering those variables.

In my example I simplified, but to build the x-show I use a loop as well:

@foreach($posts as $post)
  <div x-show="postActiveId{{ $post->id }}"></div>
@endforeach

if I add a wire:key to that div it also doesn't work.

[KevinBatdorf]

Can you set it up on the laravel playground?

[joshhanley]

@joostvanhoof did you manage to sort this out?

[joshhanley]

@joostvanhoof hmm I thought you could, but if you can't get the playground working, I'd be happy to have a look at an example repo if that's easier?

[joostvanhoof]

@joshhanley yeah would love to debug this. It's work in progress and quite a repo, happy to walk you through it. Would you be up for a 20 min video call to pair on this?

[joshhanley]

@joostvanhoof don't have the time at the moment. But if you can put a small test repo together that I could pull down, I'll have a look when I get a chance 🙂

[joostvanhoof]

Thanks. I'll see if I can get that done soon, will keep you posted!

[joshhanley]

No worries!