You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The goal of actions in Livewire is to be able to easily listen to page interactions, and call a method on your Livewire component (re-rendering the component).
There are lots of instances where a page interaction doesn't warrant a full server-roundtrip, like toggling a modal.
2
13
3
14
For these cases, AlpineJS is the perfect companion to Livewire.
@@ -91,7 +102,7 @@
91
102
92
103
Now, the Livewire and Alpine syntaxes are completely separate, AND you have a reusable Blade component to use from other components.
93
104
94
-
## Interacting With Livewire From Alpine: `$wire`
105
+
## Interacting With Livewire From Alpine: `$wire` {#interacting-with-livewire-from-alpine}
95
106
96
107
From any Alpine component inside a Livewire component, you can access a magic `$wire` object to access and manipulate the Livewire component.
97
108
@@ -193,7 +204,7 @@ public function increment()
193
204
$wire.__instance
194
205
@endcomponent
195
206
196
-
## Sharing State Between Livewire And Alpine: @verbatim`@entangle`@endverbatim
207
+
## Sharing State Between Livewire And Alpine: @verbatim`@entangle`@endverbatim {#sharing-state}
197
208
Livewire has an incredibly powerful feature called "entangle" that allows you to "entangle" a Livewire and Alpine property together. With entanglement, when one value changes, the other will also be changed.
198
209
199
210
To demonstrate, consider the dropdown example from before, but now with its `showDropdown` property entangled between Livewire and Alpine. By using entanglement, we are now able to control the state of the dropdown from both Alpine AND Livewire.
@@ -248,7 +259,7 @@ public function delete()
248
259
249
260
If you are having trouble following this difference. Open your browser's devtools and observe the difference in XHR requests with and without `.defer` added.
250
261
251
-
## Using the `@verbatim@js@endverbatim` directive
262
+
## Using the `@verbatim@js@endverbatim` directive {#js-directive}
252
263
253
264
If ever you need to output PHP data for use in Alpine, you can now use the `@verbatim@js@endverbatim` directive.
254
265
@@ -260,7 +271,7 @@ public function delete()
260
271
@endverbatim
261
272
@endcomponent
262
273
263
-
## Accessing Livewire Directives From Blade Components
274
+
## Accessing Livewire Directives From Blade Components {#livewire-directives-from-blade-components}
264
275
Extracting re-usable Blade components within your Livewire application is an essential pattern.
265
276
266
277
One difficulty you might encounter while implementing Blade components within a Livewire context is accessing the value of attributes like `wire:model` from inside the component.
@@ -408,7 +419,7 @@ public function delete()
408
419
409
420
> Note: The @verbatim{{$attributes}}@endverbatim expression is a mechanism in Laravel 7 and above to forward extra HTML attributes declared on the component tag.
Under the hood, `wire:model` adds an event listener to update a property every time the `input` event is dispatched on or under the element. Another way to communicate between Livewire and Alpine is by using Alpine to dispatch an `input` event with some data within or on an element with `wire:model` on it.
Fortunately a library like Pikaday adds its extra DOM at the end of the page. Many other libraries manipulate the DOM as soon as they are initialized and continue to mutate the DOM as you interact with them.
Copy file name to clipboardexpand all lines: authorization.blade.php
+3
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,6 @@
1
+
* [Introduction](#introduction)
2
+
3
+
## Introduction {#introduction}
1
4
2
5
To authorize actions in Livewire, you can use the `AuthorizesRequests` trait in any component, then call `$this->authorize()` like you normally would inside a controller. For example:
Copy file name to clipboardexpand all lines: defer-loading.blade.php
+3
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,6 @@
1
+
* [Introduction](#introduction)
2
+
3
+
## Introduction {#introduction}
1
4
2
5
Livewire offers a `wire:init` directive to run an action as soon as the component is rendered. This can be helpful in cases where you don't want to hold up the entire page load, but want to load some data immediately after the page load.
* [Scoping To Parent Listeners](#scope-to-parents)
11
+
* [Scoping To Components By Name](#scope-by-name)
12
+
* [Scoping To Self](#scope-to-self)
13
+
* [Listening For Events In JavaScript](#in-js)
14
+
* [Dispatching Browser Events](#browser)
15
+
18
16
Livewire components can communicate with each other through a global event system. As long as two Livewire components are living on the same page, they can communicate using events and listeners.
Copy file name to clipboardexpand all lines: inline-scripts.blade.php
+8-2
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,9 @@
1
+
* [Introduction](#introduction)
2
+
* [Using the `@verbatim@js@endverbatim` directive](#using-js-directive)
3
+
* [Accessing the JavaScript component instance](#accessing-javascript-component-instance)
4
+
5
+
## Introduction {#introduction}
6
+
1
7
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.
2
8
3
9
@component('components.code', ['lang'=>'blade'])
@@ -32,7 +38,7 @@
32
38
@endverbatim
33
39
@endcomponent
34
40
35
-
### Using the `@verbatim@js@endverbatim` directive
41
+
## Using the `@verbatim@js@endverbatim` directive {#using-js-directive}
36
42
37
43
If ever you need to output PHP data for use in Javascript, you can now use the `@verbatim@js@endverbatim` directive.
38
44
@@ -46,7 +52,7 @@
46
52
@endverbatim
47
53
@endcomponent
48
54
49
-
### Accessing the JavaScript component instance
55
+
## Accessing the JavaScript component instance {#accessing-javascript-component-instance}
50
56
51
57
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.
Validation in Livewire should feel similar to standard form validation in Laravel. In short, Livewire provides a `$rules` property for setting validation rules on a per-component basis, and a `$this->validate()` method for validating a component's properties using those rules.
3
13
@@ -131,7 +141,7 @@ public function saveContact()
131
141
132
142
If you are wondering, "why do I need `validateOnly`? Can't I just use `validate`?". The reason is because otherwise, every single update to any field would validate ALL of the fields. This can be a jarring user experience. Imagine if you typed one character into the first field of a form, and all of a sudden every single field had a validation message. `validateOnly` prevents that, and only validates the current field being updated.
133
143
134
-
## Validating with rules outside of the `$rules` property
144
+
## Validating with rules outside of the `$rules` property {#validating-with-other-rules}
135
145
If for whatever reason you want to validate using rules other than the ones defined in the `$rules` property, you can always do this by passing the rules directly into the `validate()` and `validateOnly()` methods.
Sometimes you may want to access the Validator instance that Livewire uses in the `validate()` and `validateOnly()` methods. This is possible using the `withValidator` method. The closure you provide receives the fully constructed validator as an argument, allowing you to call any of its methods before the validation rules are actually evaluated.
Copy file name to clipboardexpand all lines: lifecycle-hooks.blade.php
+4-1
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,9 @@
1
1
@include('includes.screencast-cta')
2
2
3
-
## Class Hooks
3
+
* [Class Hooks](#class-hooks)
4
+
* [Javascript Hooks](#js-hooks)
5
+
6
+
## Class Hooks {#class-hooks}
4
7
5
8
Each Livewire component undergoes a lifecycle. Lifecycle hooks allow you to run code at any part of the component's lifecyle, or before specific properties are updated.
Copy file name to clipboardexpand all lines: loading-states.blade.php
+9
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,12 @@
1
+
* [Introduction](#introduction)
2
+
* [Toggling elements during "loading" states](#toggling-elements)
3
+
* [Delaying loading indicator](#delaying-loading)
4
+
* [Targeting specific actions](#targeting-actions)
5
+
* [Targeting models](#targeting-models)
6
+
* [Toggling classes](#toggling-classes)
7
+
* [Toggling attributes](#toggling-attributes)
8
+
9
+
## Introduction {#introduction}
1
10
2
11
Because Livewire makes a roundtrip to the server every time an action is triggered on the page, there are cases when the page may not react immediately to a user event (like a click). Livewire allows you to easily display loading states, which can make your app feel more responsive.
0 commit comments