درود بنده از sortBy برای اعمال فیلتر استفاده میکنم و در حالت لپتاپ بعد اعمال صفحه گیر نمی کنه و در حالت گوشی گیر میکنه دلیل نمی دونم چیه!!
کد موبایل
<div class=" my-4 ">
<button class="btn btn-dark w-100" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExample1" aria-expanded="false"
aria-controls="collapseExample">
مرتب سازی
</button>
<div class="collapse " id="collapseExample1">
<div class="card card-body d-flex ml-auto">
<select wire:model="sortBy" name="sortBy">
<option value="default" class=" btn btn-outline-dark w-100 my-3"
selected="selected"> موب همه محصولات
</option>
<option value="Woman" class=" btn btn-outline-dark w-100 my-3"> زنانه
</option>
<option value="Man" class=" btn btn-outline-dark w-100 my-3"> مردانه
</option>
<option value="KindOfProduct" class=" btn btn-outline-dark w-100 my-3"> ست
</option>
<option value="cheap" class=" btn btn-outline-dark w-100 my-3">ارزان ترین
</option>
<option value="expensive" class=" btn btn-outline-dark w-100 my-3">گران
ترین
</option>
<option value="especial" class=" btn btn-outline-dark w-100 my-3">محصولات
ویژه
</option>
<option value="RealPrice" class=" btn btn-outline-dark w-100 my-3">محصولات
تخفیف دار
</option>
<option value="quantity" class=" btn btn-outline-dark w-100 my-3">تک
موجودی
</option>
<option value="latest" class=" btn btn-outline-dark w-100 my-3">جدید ترین
</option>
<option value="oldest" class=" btn btn-outline-dark w-100 my-3">قدیمی ترین
</option>
</select>
</div>
</div>
<div class="loader" wire:loading wire:target="sortBy"></div>
</div>
این خطم حذف میکنم داستان همونه
<div class="loader" wire:loading wire:target="sortBy"></div>
اینم بخش رندر کامپوننت
if (
$this->sortBy == 'Woman') {
$products = \App\Models\Product::query()->where('***', 'Woman')->orderBy('id', 'desc')->paginate(8);
}
elseif ($this->sortBy == 'Man') {
$products = \App\Models\Product::query()->where('***', 'Man')->orderBy('id', 'desc')->paginate(8);
}elseif ($this->sortBy == 'KindOfProduct') {
$products = \App\Models\Product::query()->where('KindOfProduct', 'Couple')->orderBy('id', 'desc')->paginate(8);
} elseif ($this->sortBy == 'latest') {
$products = \App\Models\Product::query()->orderByDesc('id')->paginate(8);
} elseif ($this->sortBy == 'oldest') {
$products = \App\Models\Product::query()->oldest()->paginate(8);
} elseif ($this->sortBy == 'cheap') {
$products = \App\Models\Product::query()->orderBy('price', 'asc')->paginate(8);
} elseif ($this->sortBy == 'expensive') {
$products = \App\Models\Product::query()->orderBy('price', 'desc')->paginate(8);
} elseif ($this->sortBy == 'especial') {
$products = \App\Models\Product::query()->where('TopProduct', 'yes')->orderByDesc('id')->paginate(8);
} elseif ($this->sortBy == 'quantity') {
$products = \App\Models\Product::query()->where('quantity', '1')->orderByDesc('id')->paginate(8);
} elseif ($this->sortBy == 'RealPrice') {
$products = \App\Models\Product::query()->where('RealPrice', '!=', null)->orderByDesc('id')->paginate(8);
}
elseif ($this->sortBy == 'default')
$products =\App\Models\Product::query()->orderByDesc('id')->paginate(8);
return view('livewire.product', compact('products','ResultSearch'));
دوستان اگر لطف کنند و راهنمایی کنند تخفیف 10 درصدی برای ساعت مچی با ارسال رایگان بهشون میدم
سلام خوبی
تاحالا هیشکی برای پاسخ جایزه نزاشته بود🤣🤣😂😂😂😂😂من همینو متوجه شدم ببین درسته
مشکل شما به نظر میرسد به دلیل عدم استفاده از کلید wire:target
در المنت HTML باشد. شما باید از wire:target
برای اعلام این که کدام عملیات لایوایر شما موجب ایجاد لودر شده است استفاده کنید.
برای این منظور، شما باید wire:target
را برای المنت <select>
تعریف کرده و مقدار آن را برای این که این المنت هنگام تغییر مقدار، یک لودر را نمایش دهد به $sortBy
تنظیم کنید.
کد HTML:
<select wire:model="sortBy" name="sortBy" wire:target="sortBy">
کد CSS:
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
همچنین، برای اطمینان از اینکه پارامتر sortBy
در خروجی قرار دارد، می توانید از dump()
برای چاپ مقدار $sortBy
در صفحه استفاده کنید.
نکته: با توجه به اینکه پروژه شما در حالت لابتاپ صفحهگیر نمیشود، ممکن است دلیل آن ضعف پردازنده و رم و یا مشکل در سخت افزار ویندوز باشد. در این صورت، بهتر است از سیستم با قطعات قدرتمندتر استفاده کنید.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟