英文:
Modal window in Laravel Livewire component shows same information for different products on 'Buy' button click
问题
问题出在 Livewire 组件中,当单击包含多个产品的 Livewire 组件中的“购买”按钮时,弹出的模态窗口显示的信息是相同的,无论单击哪个“购买”按钮。
以下是 Livewire 组件视图的代码片段:
<div>
<!-- 产品 -->
<div class="grid grid-cols-1 gap-4 mx-auto sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-6">
@foreach ($products as $product)
<div class="w-full overflow-hidden bg-gray-900 rounded-md shadow-lg">
<img class="object-cover w-full h-56" src="{{ $product->image }}" alt="Image">
<div class="flex items-center justify-between px-3 py-2 bg-gray-800">
<p class="text-lg font-bold text-white">${{ $product->price }}</p>
<!-- 购买按钮 -->
<button class="btn btn-sm" wire:click="openModal({{ $product->id }})" wire:loading.attr="disabled"
wire:target="openModal({{ $product->id }})">Buy</button>
<!-- -- -->
</div>
</div>
@endforeach
</div>
<!-- -- -->
<!-- 模态窗口 -->
<div class="fixed inset-0 z-10 {{ $showModal ? 'visible' : 'hidden' }} overflow-y-auto">
<div class="flex items-center justify-center min-h-screen px-4">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div class="overflow-hidden transition-all transform bg-white rounded-lg shadow-xl sm:max-w-lg sm:w-full">
<div class="px-4 py-3 text-lg font-medium text-gray-800 bg-gray-100">{{ $product->name }}</div>
<div class="p-4">
<p class="text-gray-700">{{ $product->description }}</p>
</div>
<div class="px-4 py-3 bg-gray-100 sm:flex sm:flex-row-reverse">
<button class="w-full px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded sm:w-auto sm:mb-0 sm:mr-2 hover:bg-blue-700">
保存
</button>
<button wire:click='closeModal()' class="w-full px-4 py-2 font-bold text-gray-800 bg-gray-400 rounded sm:w-auto hover:bg-gray-600">
取消
</button>
</div>
</div>
</div>
</div>
<!-- -- -->
</div>
此外,该组件的方法和属性如下:
use Livewire\Component;
class Products extends Component
{
public $products;
public $showModal = false;
public function mount()
{
$this->products = Product::all();
}
public function openModal($productId)
{
$this->showModal = true;
$this->products = Product::where('id', $productId)->first();
}
public function closeModal()
{
$this->showModal = false;
}
}
总之,问题在于 Livewire 组件中的模态窗口在单击“购买”按钮时未显示正确的产品信息。
英文:
The issue is with the modal window that opens when you click the Buy button in a Livewire component that contains multiple products. Despite the fact that each product has unique information, the modal window displays the same information regardless of which Buy button is clicked.
Here is a code snippet of the Livewire component's view:
<div>
<!-- Products -->
<div class="grid grid-cols-1 gap-4 mx-auto sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-6">
@foreach ($products as $product)
<div class="w-full overflow-hidden bg-gray-900 rounded-md shadow-lg">
<img class="object-cover w-full h-56" src="{{ $product->image }}" alt="Image">
<div class="flex items-center justify-between px-3 py-2 bg-gray-800">
<p class="text-lg font-bold text-white">${{ $product->price }}</p>
<!-- Buy button -->
<button class="btn btn-sm" wire:click="openModal({{ $product->id }})" wire:loading.attr="disabled"
wire:target="openModal({{ $product->id }})">Buy</button>
<!-- -->
</div>
</div>
@endforeach
</div>
<!-- -->
<!-- Modal window -->
<div class="fixed inset-0 z-10 {{ $showModal ? 'visible' : 'hidden' }} overflow-y-auto">
<div class="flex items-center justify-center min-h-screen px-4">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div class="overflow-hidden transition-all transform bg-white rounded-lg shadow-xl sm:max-w-lg sm:w-full">
<div class="px-4 py-3 text-lg font-medium text-gray-800 bg-gray-100">{{ $product->name }}</div>
<div class="p-4">
<p class="text-gray-700">{{ $product->description }}</p>
</div>
<div class="px-4 py-3 bg-gray-100 sm:flex sm:flex-row-reverse">
<button class="w-full px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded sm:w-auto sm:mb-0 sm:mr-2 hover:bg-blue-700">
Save
</button>
<button wire:click='closeModal()' class="w-full px-4 py-2 font-bold text-gray-800 bg-gray-400 rounded sm:w-auto hover:bg-gray-600">
Cancel
</button>
</div>
</div>
</div>
</div>
<!-- -->
</div>
Additionally, the component's methods and properties are as follows:
use Livewire\Component;
class Products extends Component
{
public $products;
public $showModal = false;
public function mount()
{
$this->products = Product::all();
}
public function openModal($productId)
{
$this->showModal = true;
$this->products = Product::where('id', $productId)->first();
}
public function closeModal()
{
$this->showModal = false;
}
}
In summary, the problem is that the modal window in the Livewire component is not displaying the correct product information when the "Buy" button is clicked.
答案1
得分: 0
Take a new property 'selectedProduct' and use that in view
public $selectedProduct;
public function openModal($productId)
{
$this->showModal = true;
$this->selectedProduct = Product::where('id', $productId)->first();
}
And change the following in the view
<div class="px-4 py-3 text-lg font-medium text-gray-800 bg-gray-100">{{ $selectedProduct->name }}</div>
<div class="p-4">
<p class="text-gray-700">{{ $selectedProduct->description }}</p>
</div>
英文:
Take a new property 'selectedProduct' and use that in view
public $selectedProduct;
public function openModal($productId)
{
$this->showModal = true;
$this->selectedProduct = Product::where('id', $productId)->first();
}
And change following in the view
<div class="px-4 py-3 text-lg font-medium text-gray-800 bg-gray-100">{{ $selectedProduct->name }}</div>
<div class="p-4">
<p class="text-gray-700">{{ $selectedProduct->description }}</p>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论