I’m building at the moment a Alpine js Modal that can dynamically add a Livewire form component.
When I’m including the component in a normal blade view, everything works fine. But when I’m adding the form component with Alpine js (fetch and x-ref) the wire:model inputs are showing no value. There are also no ajax requests from livewire when I’m writing in the input fields.
I think the reactivity of the form component gets lost when he is between <template x-for=""> loop from Alpine js.
Here the shortened code of the modal component:
<div>
<div
x-data="{...windowManager()}"
x-on:add-window.window="addWindow($event, $dispatch)"
>
<template x-for="(window, index) in windows" :key="index">
<div>
<div x-ref="test"></div>
</div>
</template>
</div>
</div>
<script>
function windowManager() {
/*
Modal logic
*/
/* Fetch view and add it to modal with x-ref */
fetch('/frontend/blog')
.then(response => response.text())
.then(html => { this.$refs.test.innerHTML = html })
}
</script>
Here I fetch a view that contains the Livewire form component, but when the component is between the <template x-for=""> loop the reactivity gets lost. Do I have to somehow refresh the form component?
Did someone had a similar problem and how can i fix this?