此问题与在包含多个产品的Livewire组件中单击“购买”按钮时打开的模式窗口有关。尽管每个产品都有唯一的信息,但无论单击哪个“购买”按钮,模式窗口都显示相同的信息。
以下是Livewire组件视图的代码片段:
<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>
此外,组件的方法和属性如下所示:
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;
}
}
总而言之,问题在于当单击“Buy”按钮时,Livewire组件中的模态窗口没有显示正确的产品信息。
1条答案
按热度按时间ohfgkhjo1#
获取新属性“selectedProduct”并在视图中使用它
并更改视图中的以下内容