Directives

Core Directives

The following Directives can be added to your Templates and instruct CBWIRE how and when to update the Wire.

wire:key

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.

wire:click

Listens for a click event and invokes the foo .

wire:click.prefetch

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.

wire:submit

Listeners for a submit event on a form.

wire:keydown

Listens for a keyDown event and invokes the foo .

wire:keydown.enter

Listens for a keyDown event when the user hits enter and invokes the foo .

wire:foo

Listens for a foo event and invokes the bar .

wire:model

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.

wire:model.debounce

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.

wire:model.defer

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.

wire:model.lazy

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.

wire:poll

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.

wire:init

Invokes the foo on your immediately after it's rendered on the page.

wire:loading

Hides the HTML element by default and makes it visible when XHR requests are performed.

wire:loading.class

Adds the foo class to the HTML element while XHR requests are in transit.

wire:loading.class.remove

Removes the foo class from the HTML element while XHR requests are in transit.

wire:loading.attr

Adds the disabled="true" attribute while XHR requests are in transit.

wire:dirty

Hides the HTML element by default and makes it visible when the element's state has changed since the latest XHR request.

wire:dirty.class

Adds the foo class to the HTML element when the element's state has changed since the latest XHR request.

wire:dirty.class.remove

Removes the foo class from the HTML element when the element's state has changed since the latest XHR request.

wire:dirty.attr

Adds the disabled="true" attribute when the element's state has changed since the latest XHR request. Used in addition to wire:target.

wire:target

Provides scoping for wire:loading and wire:dirty references, scoped to a specific .

wire:ignore

Instructs Livewire to not update the element or any child elements when updating the DOM. Useful when using third-party JavaScript libraries.

wire:ignore.self

Instructs Livewire to not update the element but DOES allow updates to any child elements when updating the DOM.

wire:offline

See

Event Modifiers

CBWIRE Directives sometimes offer "modifiers" to add extra functionality to an event. Here are the available modifiers that can be used with any event.

Keydown Modifiers

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.

Here is a quick list of some common ones you may need:

In the above example, the foo will only be called if event.key is equal to 'PageDown'.