Level 1
I have the same problem. I also want to use $wire inside Alpine.data(). I tried wrapping the JavaScript part inside @script/@endscript directives. But that doesn't work either. Have you found a solution in the meantime?
Jun 19, 2023
5
Level 1
$wire in Alpine.data()
How to access the Livewire component from the method declared in Alpine.data() (similar to the $wire magic method)
You need to move the method call from
<div x-data>
<button @click="$wire.showModal().then( () => console.log('OK') )"</button>
</div>
to
<div x-data="modals">
<button @click="showModal()"</button>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('modals', () => ({
showModal() {
$wire.showModal().then( () => console.log('OK') ) // $wire is not defined
}
}))
})
</script>
- This is an example to understand what is needed
Level 8
You need to pass the $wire object explicitly to Alpine.data.
<div x-data="modals($wire)">
<button @click="showModal()"</button>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('modals', ($wire) => ({
showModal() {
$wire.showModal().then( () => console.log('OK') ) // $wire is not defined
}
}))
})
</script>
Level 6
I always do
@script
<script>
Alpine.data('myFunction', () => {
return {
// The stuff
}
})
</script>
@endscript
I dont add it behind any alpine:init or livewire:init/initialized and works perfectly
Level 1
@this.showModal().then( () => console.log('OK') )
this.$wire.showModal().then( () => console.log('OK') )
Level 6
Please or to participate in this conversation.