Directives
CBWIRE's powerful directives allow you to listen for client side events, invoke actions, bind to data properties, and more.
Last updated
Was this helpful?
CBWIRE's powerful directives allow you to listen for client side events, invoke actions, bind to data properties, and more.
Last updated
Was this helpful?
The following Directives can be added to your and instruct CBWIRE how and when to update the .
Define a key name foo
for the element. This provides a reference point for the Livewire DOM diffing system. Useful for adding/removing elements and keeping track of lists.
Listens for a click
event and invokes the foo
.
Listens for a mouseEnter
event and then prefetches the result of the foo
. If the element is then clicked, it will swap in the prefetched result without any extra request. If it's not clicked, the cached results will be thrown away.
Listeners for a submit
event on a form.
You can listen to any JS event, not just those defined by Livewire.
The same as wire:model="foo"
except that all input events to the element will be debounced for the specified duration. Defaults to 150 milliseconds. Useful for reducing XHR background requests during user input. You can set the milliseconds value to any numeric value.
If your input field does not require immediate updating ( such as for instant form validation), we highly recommended you used the lazy modifier to reduce the number of XHR requests .
Hides the HTML element by default and makes it visible when XHR requests are performed.
Adds the foo
class to the HTML element while XHR requests are in transit.
Removes the foo
class from the HTML element while XHR requests are in transit.
Adds the disabled="true"
attribute while XHR requests are in transit.
Hides the HTML element by default and makes it visible when the element's state has changed since the latest XHR request.
Adds the foo
class to the HTML element when the element's state has changed since the latest XHR request.
Removes the foo
class from the HTML element when the element's state has changed since the latest XHR request.
Adds the disabled="true"
attribute when the element's state has changed since the latest XHR request. Used in addition to wire:target
.
Instructs Livewire to not update the element or any child elements when updating the DOM. Useful when using third-party JavaScript libraries.
Instructs Livewire to not update the element but DOES allow updates to any child elements when updating the DOM.
CBWIRE Directives sometimes offer "modifiers" to add extra functionality to an event. Here are the available modifiers that can be used with any event.
stop
Equivalent of event.stopPropagation()
prevent
Equivalent of event.preventDefault()
self
Only triggers an action if the event was triggered on itself. This prevents outer elements from catching events that were triggered from a child element. (Like often in the case of registering a listener on a modal backdrop)
debounce.300ms
Adds an Xms debounce to the handling of the action.
Here is a quick list of some common ones you may need:
Backspace
backspace
Escape
escape
Shift
shift
Tab
tab
ArrowRight
arrow-right
You will want to add the .prevent to ensure that the browser doesn't submit the form.
Listens for a keyDown
event and invokes the foo
.
Listens for a keyDown
event when the user hits enter and invokes the foo
.
Listens for a foo
event and invokes the bar
.
Provided you have data[ "foo" ]
defined in your , this creates a one-to-one model binding. Any time the element is updated, the value is synchronized.
Creates a one-to-one model binding with data[ "foo" ]
in your but defers any XHR updates until an is performed. Useful for reducing XHR requests.
Creates a one-to-one model binding with data[ "foo" ]
in your but will not perform an XHR updates until an onBlur
event is emitted. Useful for reducing XHR requests.
Performs an XHR request to re-render the elements based on a set interval. An interval can be specified in both seconds or milliseconds. You can also specify an that you want to invoke.
Invokes the foo
on your immediately after it's rendered on the page.
Provides scoping for wire:loading
and wire:dirty
references, scoped to a specific .
See
To listen for specific keys on keydown events, you can provide the name of the key as a modifier. You can use any valid key names exposed via as modifiers by converting them to kebab-case.
In the above example, the foo will only be called if event.key
is equal to 'PageDown'.