点击“购买”按钮时,Laravel Livewire组件中的模态窗口显示不同产品的相同信息

uqjltbpv  于 2023-02-25  发布在  其他
关注(0)|答案(1)|浏览(105)

此问题与在包含多个产品的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组件中的模态窗口没有显示正确的产品信息。

ohfgkhjo

ohfgkhjo1#

获取新属性“selectedProduct”并在视图中使用它

public $selectedProduct;

public function openModal($productId)
{
    $this->showModal = true;
    $this->selectedProduct = Product::where('id', $productId)->first();
}

并更改视图中的以下内容

<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>

相关问题