برای دو ماه گذشته ، من با استفاده از یک برنامه وب ساده CMS کار کرده ام لاراول با LiveWire 3بشر در حالی که همه چیز به آرامی پیش می رفت ، من با موضوعی روبرو شدم که مرا ناامید کرد – من Select2 کشویی داده ها را به درستی به روز یا اتصال در LiveWire به روز نکردبشر
📌 چرا از Select2 استفاده می کنید؟
من انتخاب کردم Select2 از آنجا که من برای جستجوی لیستی از داده ها در یک کشویی به یک مؤلفه ساده UI نیاز داشتم. Select2 یک راه حل زیبا را ارائه می دهد که استاندارد را تقویت می کند عناصر با عملکرد جستجو ، بدون اینکه من را ملزم به ایجاد یک رابط کاربری سفارشی از ابتدا کنم.
با این حال ، ادغام Select2 با LiveWire 3 آنقدر که انتظار داشتم ساده نبود. مشکل؟ LiveWire به طور خودکار به روزرسانی های ساخته شده توسط مؤلفه های مبتنی بر JavaScript مانند Select2 را تشخیص نمی دهد.
🚨 شماره: Select2 و LiveWire Data الزام آور
هنگام استفاده زندگی زنده، ورودی های فرم معمولاً با استفاده از آن محدود می شوند wire:model، اجازه به روزرسانی های زمان واقعی به حالت مؤلفه. با این حال ، از آنجا Select2 DOM را با استفاده از JavaScript دستکاری می کند، LiveWire تغییرات ایجاد شده توسط Select2 را تشخیص نمی دهد مگر اینکه صریحاً مطلع شود.
در اینجا تنظیم اساسی من
مؤلفه Blade (مثال .blade.php)
function init_select2(){
var ctr = $('#countries')
ctr.select2();
}
$(document).ready(function (){
// init_select2();
});
Livewire Component (Example.php)
namespace App\Livewire;
use Livewire\Component;
class Example extends Component
{
public $select_value = "default-value";
public function render()
{
return view('livewire.example');
}
public function submit(){
dd($this->select_value);
}
}
to be able use select2 and jquery, you must include this section on your blade layout
"https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
href ="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel ="برگه شیوه" />
"https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js">
کد فوق من در مورد بخش INIT2 انتخاب می کنم و Select2 نباید فعال یا در حال اجرا باشد.
در اینجا نتیجه مورد انتظار من نیاز دارم و این بدون استفاده از Select2 است
بعد از کلیک مشاهده می کنید save دکمه من می توانم نتیجه ای را که انتخاب کردم ، ببینم. بیایید روشن و init select2 توسط Undument را روشن کنید init_select2();
هنوز می توانید نتیجه را ببینید default-value و بر اساس ارزش انتخاب نشده ، ما انتخاب شده ایم.
✅ راه حل: اعزام دستی رویدادها برای LiveWire
پس از LiveWire 3 تغییرات DOM را به طور خودکار تشخیص نمی دهد مؤلفه های UI مبتنی بر جاوا اسکریپت، ما باید به صورت دستی به روز کنیم ایالت LiveWire کی Select2 تغییر می کند.
LiveWire Component (مثال. php)
namespace App\Livewire;
use Livewire\Attributes\On;
use Livewire\Component;
class Example extends Component
{
public $select_value = "default-value";
public function render()
{
return view('livewire.example');
}
public function submit(){
dd($this->select_value);
}
#[On('select-updated')]
public function updateValue($val){
$this->select_value = $val;
$this->dispatch("update-value");
}
}
Blade ComponEnet (مثال .blade.php
function init_select2(){
var ctr = $('#countries')
ctr.select2();
}
$(document).ready(function (){
init_select2();
$('#countries').on("change", function (e){
window.Livewire.dispatch('select-updated', [$(this).val()]);
});
});
Livewire.on("update-value", function (){
setTimeout(init_select2, 0)
console.log("event udpated and reset select2")
})
🔍 اصلاحات کلیدی و غذای آماده
✅ به صورت دستی اعزام select-updated واقعه وقتی Select2 تغییر می کند.
✅ گوش فرا دادن update-value در LiveWire برای شروع مجدد مجدد SELECT2.
✅ استفاده کردن setTimeout(init_select2, 0); برای جلوگیری از شکستن Select2 پس از یک نسخه زنده زنده. setTimeout لازم است زیرا تضمین می کند که LiveWire قبل از شروع مجدد SELECT2 ، ابتدا به روزرسانی های خود را پردازش می کند.
اکنون ، هر بار که کاربر گزینه ای را انتخاب می کند ، LiveWire به درستی وضعیت خود را به روز می کندوت Select2 عملکردی باقی مانده است بعد از رأی دادن دوباره! 🚀
در اینجا نتیجه
thoughts افکار نهایی
ادغام کننده Select2 با LiveWire 3 می تواند ناامید کننده باشد ، اما راه حل است ساده هنگامی که می فهمید چگونه LiveWire مؤلفه های مبتنی بر JavaScript را کنترل می کندبشر با ارسال دستی به روزرسانی ها و انتخاب مجدد SELECT2 ، می توانید از مزایای آن لذت ببرید واکنش پذیری LiveWire وت ویژگی های جستجوی قدرتمند SELECT2بشر
اگر به موضوعاتی رسیدگی کردید ، این رویکرد را امتحان کنید و به من اطلاع دهید که چگونه برای شما کار می کند! 🚀🔥
