composer require livewire/livewire
@livewireScriptsand then in the head section include the few Livewire styles with
dropdowns. An Artisan command helpfully scaffolds the Laravel module and the blade view.
php artisan make:livewire dropdowns
wire:modeldirectives. 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:modelattribute on the select element, the select’s value is bound to the
countryproperty 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.
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.