Modal window in Laravel Livewire component shows same information for different products on 'Buy' button click

huangapple go评论74阅读模式
英文:

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:

&lt;div&gt;
&lt;!-- Products --&gt;
&lt;div class=&quot;grid grid-cols-1 gap-4 mx-auto sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-6&quot;&gt;
@foreach ($products as $product)
&lt;div class=&quot;w-full overflow-hidden bg-gray-900 rounded-md shadow-lg&quot;&gt;
&lt;img class=&quot;object-cover w-full h-56&quot; src=&quot;{{ $product-&gt;image }}&quot; alt=&quot;Image&quot;&gt;
&lt;div class=&quot;flex items-center justify-between px-3 py-2 bg-gray-800&quot;&gt;
&lt;p class=&quot;text-lg font-bold text-white&quot;&gt;${{ $product-&gt;price }}&lt;/p&gt;
&lt;!-- Buy button --&gt;
&lt;button class=&quot;btn btn-sm&quot; wire:click=&quot;openModal({{ $product-&gt;id }})&quot; wire:loading.attr=&quot;disabled&quot;
wire:target=&quot;openModal({{ $product-&gt;id }})&quot;&gt;Buy&lt;/button&gt;
&lt;!-- --&gt;
&lt;/div&gt;
&lt;/div&gt;
@endforeach
&lt;/div&gt;
&lt;!-- --&gt;
&lt;!-- Modal window  --&gt;
&lt;div class=&quot;fixed inset-0 z-10 {{ $showModal ? &#39;visible&#39; : &#39;hidden&#39;  }} overflow-y-auto&quot;&gt;
&lt;div class=&quot;flex items-center justify-center min-h-screen px-4&quot;&gt;
&lt;div class=&quot;fixed inset-0 transition-opacity&quot;&gt;
&lt;div class=&quot;absolute inset-0 bg-gray-500 opacity-75&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;overflow-hidden transition-all transform bg-white rounded-lg shadow-xl sm:max-w-lg sm:w-full&quot;&gt;
&lt;div class=&quot;px-4 py-3 text-lg font-medium text-gray-800 bg-gray-100&quot;&gt;{{ $product-&gt;name }}&lt;/div&gt;
&lt;div class=&quot;p-4&quot;&gt;
&lt;p class=&quot;text-gray-700&quot;&gt;{{ $product-&gt;description }}&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;px-4 py-3 bg-gray-100 sm:flex sm:flex-row-reverse&quot;&gt;
&lt;button class=&quot;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&quot;&gt;
Save
&lt;/button&gt;
&lt;button wire:click=&#39;closeModal()&#39; class=&quot;w-full px-4 py-2 font-bold text-gray-800 bg-gray-400 rounded sm:w-auto hover:bg-gray-600&quot;&gt;
Cancel
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- --&gt;
&lt;/div&gt;

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-&gt;products = Product::all();
}
public function openModal($productId)
{
$this-&gt;showModal = true;
$this-&gt;products = Product::where(&#39;id&#39;, $productId)-&gt;first();
}
public function closeModal()
{
$this-&gt;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-&gt;showModal = true;
$this-&gt;selectedProduct = Product::where(&#39;id&#39;, $productId)-&gt;first();
}

And change following in the view

&lt;div class=&quot;px-4 py-3 text-lg font-medium text-gray-800 bg-gray-100&quot;&gt;{{ $selectedProduct-&gt;name }}&lt;/div&gt;
&lt;div class=&quot;p-4&quot;&gt;
&lt;p class=&quot;text-gray-700&quot;&gt;{{ $selectedProduct-&gt;description }}&lt;/p&gt;
&lt;/div&gt;

huangapple
  • 本文由 发表于 2023年2月24日 00:56:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/75547955.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定