Uncaught Component not found

Hello, I have a livewire component which nested another livewire component:

<div x-data="{show: false}">
        <template x-if="show">
            <livewire:goole-map />
        </template>
</div>

<button wire:click="reload()">Reload</button>

My requirement is to use "x-if" to control whether the component is shown or not.

But if the variable "show" is false, and I try to click the button "Reload" to render the current component it will show the error: Uncaught component not found: shgVZbFOu1DZAz4Wm2mR

If the variable "show" is true, it works, why is this happening? How can I fix?

RemiM

1 year ago

Level 16

Since x-if removes the component from the DOM entirely, Livewire loses track of it. Instead, use x-show, which only hides the component while keeping it in the DOM:

<div x-data="{ show: false }">
    <div x-show="show">
        <livewire:google-map />
    </div>
</div>

<button wire:click="reload()">Reload</button>

xshanj2

1 year ago

Level 1

@RemiM

Thanks for your reply. I know x-show can work here, but for this page, I need x-if because I only need to load Google Maps Component(<livewire:goole-map />) when the user really needs it.

jj15

1 year ago

Level 10

@xshanj2 If that's the case, could you handle showing it conditionally using a public property on the parent component? Something like:

// Your component...
public bool $showGoogleMaps = false;

// Your view...
@if ($showGoogleMaps)
    <livewire:google-map />
@endif

xshanj2

1 year ago

Level 1

@jj15 Thanks for your reply. If this is the case, I can't control it through js, but I need to reload the page every time.

Sinnbeck

1 year ago

Level 102

Is it really called goole-map and not google-map ?

xshanj2

1 year ago

Level 1

@Sinnbeck Sorry, I made a mistake for spell. But in the actual scenario, I really need to use x-if to control whether to load Google Maps Component

Please or to participate in this conversation.