world_
tables;composer require livewire/livewire
@livewireScripts
and then in the head section include the few Livewire styles with @livewireStyles
.dropdowns
. An Artisan command helpfully scaffolds the Laravel module and the blade view.php artisan make:livewire dropdowns
app\Http\Livewire\Dropdowns.php
and resources\views\livewire\dropdowns.blade.php
wire:model
directives. These provide two-way data binding with public attributes of the back-end component. Here I have excluded the cities select element if the list would be empty. Leave lines 11 and 22 out if you would prefer to always show the second select.render()
method is called whenever one of the elements in the view component changes, such as when the user changes the Country dropdown. Before invoking render, Livewire re-hydrates the public properties of the component. Thanks to the wire:model
attribute on the select element, the select’s value is bound to the country
property in our component. We can then use this to set the cities array using an Eloquent query. When the render method ends by returning the view component, the view is updated with the cities populated in the second dropdown.@livewire
directive;mount()
method where they can be used to initialise the country and city public properties of the Dropdown component. Since the data is bound two-way to the select element, when the page is rendered, the previous entries will be selected.