Inline Scripts
Livewire recommends that you use AlpineJS for most of your JavaScript needs, but it does support using <script>
tags directly inside your component's view.
<div>
<!-- Your components HTML -->
<script>
document.addEventListener('livewire:load', function () {
// Your JS here.
})
</script>
</div>
Please note that your scripts will be run only once upon the first render of the component. If you need to run a JavaScript function later - emit the event from the component and listen to it in JavaScript as described here)
You can also push scripts directly onto Blade stacks from your Livewire component:
<!-- Your component's view here -->
@push('scripts')
<script>
// Your JS here.
</script>
@endpush
Accessing the JavaScript component instance
Because Livewire has both a PHP AND a JavaScript portion, each component also has a JavaScript object. You can access this object using the special @this
blade directive in your component's view.
Here's an example:
<script>
document.addEventListener('livewire:load', function () {
// Get the value of the "count" property
var someValue = @this.count
// Set the value of the "count" property
@this.count = 5
// Call the increment component action
@this.increment()
// Run a callback when an event ("foo") is emitted from this component
@this.on('foo', () => {})
})
</script>
Note: the
@this
directive compiles to the following string for JavaScript to interpret: "Livewire.find([component-id])"
← Previous Topic
Laravel Echo
Next Topic →