![]() Once we finish our work, we’ll have this component ready to be used: Show/hide the list of selectable options: We’ll use the JS.toggle command to hide and show the options list.Once the parent assigns are updated to keep the updated selection, the updated assigns will propagate to the multi-select component so it will render its own changes. Update when the selection changes: We’ll take advantage of the LiveComponent life cycle.We’ll make this happen using the new feature that was introduced in LiveView v0.17.8: The ability to use phx-change to emit an event when an individual input has changed! Send selection updates to the parent LiveView: every time an option is selected, the multi-select component should inform the parent LiveView of any changes to the selection, so that it can perform any needed action with them.Show the options we’ve already chosen: We’ll define a selected_options assign to track and render the component’s selections. ![]() Then we’ll use the helpers to render the HTML inputs for selecting and deselecting the options we’ll design the component to take a form as a parameter so that we can create the inputs as part of any external form.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |