php 使用Livewire时,分页元素在更改页面时不会更新

esyap4oy  于 2023-09-29  发布在  PHP
关注(0)|答案(1)|浏览(102)

我将Livewire类中分页的产品集合传递到Livewire组件中,它基本上工作正常。但是,当我通过分页更改页面时(例如从第1页转到第2页)我发现当前隐藏的元素没有更新。
例如,当我转到第2页时,包含长描述的<p>仍然显示第1页上相应产品的产品->id。但是,包含简短描述的<p>可以正常更新。
我做错了什么?

App/Livewire/ProductList.php

<?php

namespace App\Livewire;

use Livewire\WithPagination;
use Livewire\Component;
use App\Models\Product;

class ProductList extends Component
{
    use WithPagination;

    public function render()
    {
        $products = Product::paginate(20);

        return view('livewire.product-list', [
            "products" => $products,
        ]);

    }
}

App/Resources/Views/Livewire/product-list.blade.php

<div class="grid grid-cols-4">
            @foreach ($products as $product)
                <div x-data="{expanded{{$product->id}}:false}" href="#">
                    <p x-show="!expanded{{$product->id}}">
                        {{$product->short_description}}
                    </p>
                    <a x-show="!expanded{{$product->id}}" x-on:click="expanded{{$product->id}}=true">
                        Read More                 
                    </a>
                    <p x-show="expanded{{$product->id}}">
                        {{$product->long_description}}
                    </p>
                    <a x-show="expanded{{$product->id}}" x-on:click="expanded{{$product->id}}=true">
                        Read Less                   
                    </a>
                </div>
            @endforeach  
        </div>
        <div id="productPagination">
            {{ $products->links() }}  
        </div>
7rfyedvj

7rfyedvj1#

有两件事,首先你需要确保你的视图只包含一个根元素。为了实现这一点,我将整个视图 Package 在一个div中。
其次,需要为循环中的根元素提供一个wire:key,并为其提供一个唯一的值。

<div>
    <div class="grid grid-cols-4">
        @foreach ($products as $product)
            <div x-data="{expanded{{$product->id}}:false}" wire:key="product-{{ $product->id }}">
                <p x-show="!expanded{{$product->id}}">
                    {{$product->short_description}}
                </p>
                <a x-show="!expanded{{$product->id}}" x-on:click="expanded{{$product->id}}=true">
                    Read More                 
                </a>
                <p x-show="expanded{{$product->id}}">
                    {{$product->long_description}}
                </p>
                <a x-show="expanded{{$product->id}}" x-on:click="expanded{{$product->id}}=true">
                    Read Less                   
                </a>
            </div>
        @endforeach  
    </div>
    <div id="productPagination">
        {{ $products->links() }}  
    </div>
</div>

此外,href不是div标记上的有效属性。

相关问题