Call Actions, emit and listen for Events, and more - all from Vanilla JavaScript.
CBWIRE provides a handful of JavaScript hooks and functionality you can use as needed.
Inline JavaScript
We recommend you use AlpineJS for most of your JavaScript needs, but you can use <script> tags directly inside your components.
<div><!--- Your component's template ---> <script>document.addEventListener('livewire:load',function () {// Your JS here. }) </script></div>
Your scripts will be run only once upon the first render of the component. If you need to run a JavaScript function later, you can emit the Event from the component and listen to it in JavaScript.
Lifecycle Hooks
CBWIRE allows you to execute JavaScript during various events.
You can interact with your component's actions, set data properties, and more, using cbwire.find. Once you have a reference to the component, you can use the methods below.
<cfoutput> <div><!-- HTML goes here --> <script>document.addEventListener("livewire:load",function() {// _id contains the id of our wirevar component =cbwire.find('#_id#');// gets the value of a data property called 'count'var count =component.count;// updates the values of a data propertycomponent.count =5;// calls the increment action on our wirecomponent.increment(); // calls the addTask action and passes parameters component.addTask( 'someTask' ); // same as increment call abovecomponent.call( 'increment' ); // On someEvent, console logcomponent.on( 'someEvent',function() {console.log('Got someEvent'); } );// emits someEvent and pass parameterscomponent.emit('someEvent','foo','bar'); } ); </script> </div></cfoutput>