我将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>
1条答案
按热度按时间7rfyedvj1#
有两件事,首先你需要确保你的视图只包含一个根元素。为了实现这一点,我将整个视图 Package 在一个
div
中。其次,需要为循环中的根元素提供一个
wire:key
,并为其提供一个唯一的值。此外,
href
不是div
标记上的有效属性。