The x-model directive in Alpine.js is used for two-way data binding. It binds the value of an HTML element to a JavaScript variable, allowing changes made in the HTML to reflect in the JavaScript and vice versa. Here are some common use cases for x-model along with coding examples:
Form Input Binding:
Bind form input values to JavaScript variables for easy access and manipulation.
<div x-data="{ message: '' }">
<input type="text" x-model="message" placeholder="Type something...">
<p x-text="message"></p>
</div>
Checkbox Binding:
Bind checkbox state to a JavaScript variable.
<div x-data="{ isChecked: false }">
<input type="checkbox" x-model="isChecked">
<span x-text="isChecked ? 'Checked' : 'Unchecked'"></span>
</div>
Radio Button Binding:
Bind radio button selections to a JavaScript variable.
<div x-data="{ selectedOption: '' }">
<input type="radio" value="option1" x-model="selectedOption"> Option 1
<input type="radio" value="option2" x-model="selectedOption"> Option 2
<p x-text="'Selected option: ' + selectedOption"></p>
</div>
Select Dropdown Binding:
Bind select dropdown value to a JavaScript variable.
<div x-data="{ selectedValue: '' }">
<select x-model="selectedValue">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<p x-text="'Selected option: ' + selectedValue"></p>
</div>
Dynamic Attribute Binding:
Bind dynamic attributes based on the value of a JavaScript variable.
<div x-data="{ isDisabled: false }">
<input type="text" x-model="isDisabled">
<button :disabled="isDisabled">Submit</button>
</div>
Custom Component Binding:
Bind custom component state to a JavaScript variable.
<div x-data="{ showModal: false }">
<button @click="showModal = true">Show Modal</button>
<div x-show="showModal" @click.away="showModal = false">
<!-- Modal content goes here -->
</div>
</div>
Show a basic modal when clicking a button.
Example:
<button x-on:click="$refs.modal.open()">Open Modal</button>
<x-modal x-ref="modal">
<!-- Modal Content -->
</x-modal>
Dynamic Modal Content:
Display dynamic content inside the modal.
Example:
<button x-on:click="$refs.modal.open()">Open Modal</button>
<x-modal x-ref="modal">
<h1>{{ $modalTitle }}</h1>
<p>{{ $modalContent }}</p>
</x-modal>
Close Modal from Livewire Component:
Close the modal from within a Livewire component.
Example:
<x-modal x-ref="modal">
<h1>{{ $modalTitle }}</h1>
<p>{{ $modalContent }}</p>
<button wire:click="$refs.modal.close()">Close Modal</button>
</x-modal>
Passing Parameters to Livewire Component:
Pass parameters to a Livewire component from the modal.
Example:
<x-modal x-ref="modal">
<form wire:submit.prevent="submitForm">
<input type="text" wire:model="name">
<button type="submit">Submit</button>
</form>
</x-modal>
Confirmation Modal:
Show a confirmation modal before performing an action.
Example:
<button x-on:click="$refs.confirmModal.open()">Delete Item</button>
<x-modal x-ref="confirmModal">
<h1>Are you sure you want to delete?</h1>
<button wire:click="deleteItem">Yes, Delete</button>
<button x-on:click="$refs.confirmModal.close()">Cancel</button>
</x-modal>
Customizing Modal Styles:
Customize the styling of the modal.
Example:
<x-modal x-ref="modal" class="custom-modal">
<!-- Modal Content -->
</x-modal>
These examples demonstrate the versatility of the x-model directive in Alpine.js for creating interactive and dynamic web applications
Top comments (0)