Create a livewire component via javascript
I am working on a solution where I need multiple of the same livewire components on demand. Such as in a repeater.
Does anyone know a way to create a livewire component via javascript?
I tried to add it via .innerHTML of "<livewire:counter />". This however caused this directive to be replaced with the actual livewire component within javascript. To circumvent this I also obfuscated it by appending two strings ("<livew" + "ire:counter />"). This didnt get picked up by livewire however.
3 Replies
I don’t think it’s even possible to create a livewire component this way because it needs the component from the server and also php to render it initially.
What you would need is a wrapping livewire component that can handle adding items to an array then you can loop that array in its blade view to output new livewire components.
Yep I thought it would be this way. The only problem is that the livewire components then need to be moved to a jspanel like div which gets generated by js. @teleport doesnt support that as far as I know.
https://alpinejs.dev/directives/teleport
It seems like query selectors are supported.
teleport — Alpine.js
Send Alpine templates to other parts of the DOM