传递动态组件数据Laravel

Question

所以我是 Laravel 的新用户，我有一个产品列表表，并且添加了一个删除按钮，当我单击它时，它会显示一个基本的是/否模式。

所以我的问题是当我尝试将url和id数据传递到我的模态组件时，我已经将我的模态组件放入@forEach循环中，但由于某种原因当我将id数据记录在模态组件中时它仅显示每个产品中的第一个数据 id，当我单击另一个产品时不显示其他 id

这是我的index.blade.php 我在其中调用模态组件

    @foreach ($products as $product)
                        <tr
                            class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                            <td scope="row" class="px-6 py-4">{{ $loop->iteration }}</td>
                            <th scope="row"
                                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                {{ $product->name }}
                            </th>
                            <td class="px-6 py-4">
                                {{ $product->color }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $product->category->name }}
                            </td>
                            <td class="px-6 py-4">
                                Rp {{ number_format($product->unit_price, 0, ',', '.') }}
                            </td>
                            <td class="px-6 py-4 flex space-x-2">

                                <a href="/dashboard/products/{{ $product->name }}/edit" class="">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                                <x-modal url="/dashboard/products/" :id="$product->id" />

                                <button data-modal-target="popup-modal" data-modal-toggle="popup-modal"><i
                                        class="bi bi-x-circle"></i></button>
                            </td>
                        </tr>
                    @endforeach

这是我的模态类组件

<?php

namespace App\View\Components;

use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Modal extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct(
        public string $url,
        public string $id,
    ) {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View
    {
        return view('components.modal');
    }
}

和我的模态组件就像这样

          {{ $url }}{{ $id }}

有什么想法吗？

Answer 1

删除此行....

<x-modal url="/dashboard/products/" :id="$product->id" />

添加这个...

<x-modal url="/dashboard/products/" :id="$id" />

试试这个。我希望它会起作用。