Update select2 snippet for Livewire 3

This commit is contained in:
Marcus Moore 2024-05-29 12:58:24 -07:00
parent 17f0ac1eae
commit 093c6652a8
No known key found for this signature in database

View file

@ -610,24 +610,45 @@ function htmlEntities(str) {
*
* 1. Set the class of your select2 elements to 'livewire-select2').
* 2. Name your element to match a property in your Livewire component
* 3. Add an attribute called 'data-livewire-component' that points to $_instance->id (via `{{ }}` if you're in a blade,
* or just $_instance->id if not).
* 3. Add an attribute called 'data-livewire-component' that points to $this->getId() (via `{{ }}` if you're in a blade,
* or just $this->getId() if not).
*/
$(function () {
// $(function () {
// $('.livewire-select2').select2()
//
// $(document).on('select2:select', '.livewire-select2', function (event) {
// var target = $(event.target)
// if(!event.target.name || !target.data('livewire-component')) {
// console.error("You need to set both name (which should match a Livewire property) and data-livewire-component on your Livewire-ed select2 elements!")
// console.error("For data-livewire-component, you probably want to use $_instance->id or {{ $_instance->id }}, as appropriate")
// return false
// }
// window.livewire.find(target.data('livewire-component')).set(event.target.name, this.options[this.selectedIndex].value)
// })
//
// window.livewire.hook('message.processed', function (el,component) {
// $('.livewire-select2').select2();
// });
//
// })
document.addEventListener('livewire:init', () => {
$('.livewire-select2').select2()
$(document).on('select2:select', '.livewire-select2', function (event) {
var target = $(event.target)
if(!event.target.name || !target.data('livewire-component')) {
console.error("You need to set both name (which should match a Livewire property) and data-livewire-component on your Livewire-ed select2 elements!")
console.error("For data-livewire-component, you probably want to use $_instance->id or {{ $_instance->id }}, as appropriate")
console.error("For data-livewire-component, you probably want to use $this->getId() or {{ $this->getId() }}, as appropriate")
return false
}
window.livewire.find(target.data('livewire-component')).set(event.target.name, this.options[this.selectedIndex].value)
})
window.livewire.hook('message.processed', function (el,component) {
$('.livewire-select2').select2();
Livewire.find(target.data('livewire-component')).set(event.target.name, this.options[this.selectedIndex].value)
});
})
Livewire.hook('commit', function ({succeed}) {
succeed(({snapshot, effect}) => {
queueMicrotask(() => {
$('.livewire-select2').select2();
});
});
});
});