With fetch and x-ref loaded component disapears

[Pennywise96]

I'm building at the moment a modal with dynamic content with Alpine.js and Laravel.

I have a function that fetches a Laravel view. The view contains a tab component. For the tab component I have used: https://gist.github.com/JeffreyWay/d5d86f48a527d3c3819a67cfb793926d.

Here the shortened code of the modal component:

<div x-ref="test" class="window-content"></div>

<script>
    function windowManager()
            fetch('/frontend/blog')
                .then(response => response.text())
                .then(html => { this.$refs.test.innerHTML = html })
        }
</script>

So when I open the modal, the fetch function adds the content from my view. And the tab component is for one second visible and then disapears.

Do I have to refresh somehow the tab component?

[ryangjchandler]

@Pennywise96 where is the windowManager function being used? For Alpine to trigger a refresh, a piece of data needs to be changed on the component.

[Pennywise96]

@ryangjchandler thank you for your answer!

I have found the issue. I triggered the modal with a Livewire component:

<li x-data="{}">
    <a
        wire:click="loadModule('{{ $module }}', '{{ $type ?? '' }}', {{ $item->id ?? null }})"
        @click="$dispatch('add-window', { title: 'News', module: '{{ $module ?? '' }}', type: '{{ $type ?? '' }}', width: '{{ $width ?? 'large' }}', position: 'center', overlay: 'true' })"
        class="btn btn-sm btn-default"
    >
        test
    </a>
</li>

I have now removed the wire:click in the component and now it works!