如何使用 livewire 刷新 laravel 中猫头鹰轮播滑块中的元素？答案

【问题标题】：How to refresh a element within owl carousel slider in laravel using livewire?如何使用 livewire 刷新 laravel 中猫头鹰轮播滑块中的元素？
【发布时间】：2023-02-20 00:17:02
【问题描述】：

我正在创建一个电子商务网站，其中猫头鹰旋转木马滑块中的产品将显示一些信息，如名称、价格等。我在顶部设置了一个计数器，还设置了一个功能，当我点击一个图标添加时它会增加计数并显示在添加的滑块项中。但是当我点击时，计数会增加，但我的旋转木马会从屏幕上消失。当我刷新页面时，轮播会在购物车图标上方添加一个项目。我需要在单击购物车图标时增加购物车数量，添加的项目将在不刷新页面的情况下显示。下面是我的代码。


    <div class="row" >
            <div class="col-md-12">
                <div class="product_slider carousel_slider owl-carousel owl-theme nav_style1" data-loop="true" data-dots="false" data-nav="true" data-margin="20" data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}' >

                    @php
                       $cart = Cart::instance('cart')->content()->pluck('id');
                    @endphp

                    @foreach ($sproducts as $sproduct)
                    <div class="item">
                        <div class="product">
                            
                            <div class="product_img">
                                <div class="product_action_box">
                                    <ul class="list_none pr_action_btn">

                                        @if($cart->contains($sproduct->id))

                                        <li class="add-to-cart tooltip">
                                            <span class="tooltiptext">Item added!</span>
                                            <a href="" wire:click.prevent="removeFromCart({{$sproduct->id}})" ><i class="icon-basket-loaded"></i> Add To Cart</a>
                                        </li>
                                        @else
                                        <li class="add-to-cart">
                                            <a href="" wire:click.prevent="store({{$sproduct->id}}, '{{$sproduct->name}}', {{$sproduct->sale_price}})"><i class="icon-basket-loaded"></i> Add To Cart</a></li>
                                        @endif
                                        

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

我的 livewire 组件：

protected $listeners = ['refreshComponent'=>'$refresh'];

    public function store($product_id,$product_name, $product_price)
    {
        Cart::instance('cart')->add($product_id,$product_name,1,$product_price)->associate('App\Models\Product');
        $this->emitTo('cart-count-component', 'refreshComponent');
        $this->emitTo('onsale-component', 'refreshComponent');
        return back();
    }

【问题讨论】：

标签： laravel laravel-livewire owl-carousel

【解决方案1】：

我有一个与您类似的案例，这就是为我所做的：

JavaScript（使用 jQuery）：

window.addEventListener('contentChanged', event => {
    const owl = $('#owlCarousel'); // Owl carousel in question
    $(owl).trigger('destroy.owl.carousel'); // Destroy carousel instance
    $(owl).html($(owl).find('.owl-stage-outer').html()).removeClass('owl-loaded'); // Destroy carousel instance part 2
    $(owl).owlCarousel($(owl).data()); // Initialize Owl carousel once again with same config options
});

Livewire 组件：

$this->dispatchBrowserEvent('contentChanged');

【讨论】：