علیرضا مه آبادی
1 سال پیش توسط علیرضا مه آبادی مطرح شد
1 پاسخ

گیر کردن صفحه در هنگام اعمال فیلتر در لایووایر

درود بنده از 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 درصدی برای ساعت مچی با ارسال رایگان بهشون میدم


ثبت پرسش جدید
Arshiamohammadei
تخصص : وب و هوش مصنوعی
@Arshiamohammadei 1 سال پیش مطرح شد
0

سلام خوبی
تاحالا هیشکی برای پاسخ جایزه نزاشته بود🤣🤣😂😂😂😂😂من همینو متوجه شدم ببین درسته
مشکل شما به نظر می‌رسد به دلیل عدم استفاده از کلید 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 در صفحه استفاده کنید.

نکته: با توجه به اینکه پروژه شما در حالت لابتاپ صفحه‌گیر نمی‌شود، ممکن است دلیل آن ضعف پردازنده و رم و یا مشکل در سخت افزار ویندوز باشد. در این صورت، بهتر است از سیستم با قطعات قدرتمندتر استفاده کنید.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام