Magewire provides a special attribute syntax to declare magic bindings.
These bindings are declared as HTML element attributes that start with the keyword
If you are familiar with Alpine.js, you might recognize it looks similar to the binding
<button x-on:click="...">Click me!</button>.
However, there is one important difference.
In the case of
The most common bindings are
Listens for a
clickevent and calls the
foomethod of the component.
Listens for a browser event called
fooand calls the
barmethod of the component.
(You can listen for any browser DOM event - not just those fired by Magewire!).
$foois a public property on the component class, every time an input element with this directive is updated, the
$magewireproperty value is synchronized.
Lazily syncs the input with its corresponding component property at rest.
foomethod of the component immediately after it renders on the page.
A full list of all bindings is available in the Livewire documentation.
Binding syntax example
With the binding, the PHP method
registerClick on the Magewire component will be executed when the visitor clicks the button.
$setfunction to update a property of a Magewire component.
$set(), except that it only takes the name of a boolean property and toggles the property value.
Request and render a new version of the component from the server.
$emit()Broadcast a message to all components that have subscribed to it. See Subscribing to
emitmessages" for more information.
$emitTo()Send a message to a specific component. See Subscribing to
emitmessages for more information on
For the following examples, let's assume we are working with a Magewire component with a property
If a property update happens as the main effect of user interaction, the magic
$set() action is the most common way to update a property.
If the update happens inside a PHP function, simply assign the new property value:
Magewire components do NOT provide magic setter methods (only magic
Use direct property assignment instead:
$this->foo = 123.