モーダルウインドウにデータベースのデータを指定して反映させたい

Question

実現したいこと

上記画像のように右にある詳細ボタンをクリックしたらモーダルウインドウが出ます。
そのモーダルウインドウ内のテキストに詳細ボタンのあるテーブルの人物のデータを反映させたいです。
人物のデータ（名前・性別など）はcontactsテーブルにあります。
そのcontactsテーブルから取り出せるようにしたいです。
使用はlaravelのlivewireです。

発生している問題・分からないこと

上記画像のように、宮沢さんの詳細をクリックしたけど別の人物（田中さん）のデータでモーダルが開きました。
コードは下記で。

該当のソースコード

<div>
    <div class="buttons">
        <div class="export-btn">
            <button class="export">エクスポート</button>
        </div>
        <div class="paginate">
            {{ $contacts->links() }}
        </div>
    </div>
    <div class="contacts">
        <table class="contacts__table">
            <tr class="table-heading">
                <th class="column">お名前</th>
                <th class="column">性別</th>
                <th class="column">メールアドレス</th>
                <th class="column" colspan="2">お問い合わせ種類</th>
            </tr>
            @foreach($contacts as $contact)
            <tr class="table-inner">
                <td class="name">
                    {{ $contact['last_name'] }}
                    <span class="space"></span>
                    <span class="first">{{ $contact['first_name'] }}</span>
                </td>
                <td class="gender">
                    <input type="hidden" value="{{ $contact['gender'] }}" />
                    <?php
                    if ($contact['gender'] == '1') {
                        echo '男性';
                    } elseif ($contact['gender'] == '2') {
                        echo '女性';
                    } else {
                        echo 'その他';
                    }
                    ?>
                </td>
                <td class="address">
                    {{ $contact['email']}}
                </td>
                <td class="category">
                    {{ $contact['category']['content']}}
                </td>
                <td class="detail-button">
                    <button wire:click="openModal()" type="button" class="detail">詳細</button>
                    @if($showModal)
                    <div class="modal-wrapper">
                        <div class="modal-window">
                            <button wire:click="closeModal()" type="button" class="modal-close">
                                ×
                            </button>
                            <table class="modal__content">
                                <tr class="modal-inner">
                                    <th class="modal-ttl">お名前</th>
                                    <td class="modal-data">
                                        {{ $contact['last_name'] }}
                                        <span class="space"></span>
                                        <span class="firstName">{{ $contact['first_name'] }}</span>
                                    </td>
                                </tr>
                                <tr class="modal-inner">
                                    <th class="modal-ttl">性別</th>
                                    <td class="modal-data">
                                        <input type="hidden" value="{{ $contact['gender'] }}" />
                                        <?php
                                        if ($contact['gender'] == '1') {
                                            echo '男性';
                                        } elseif ($contact['gender'] == '2') {
                                            echo '女性';
                                        } else {
                                            echo 'その他';
                                        }
                                        ?>
                                    </td>
                                </tr>
                                <tr class="modal-inner">
                                    <th class="modal-ttl">メールアドレス</th>
                                    <td class="modal-data">{{ $contact['email'] }}</td>
                                </tr>
                                <tr class="modal-inner">
                                    <th class="modal-ttl">電話番号</th>
                                    <td class="modal-data">{{ $contact['tell'] }}</td>
                                </tr>
                                <tr class="modal-inner">
                                    <th class="modal-ttl">住所</th>
                                    <td class="modal-data">{{ $contact['address'] }}</td>
                                </tr>
                                <tr class="modal-inner">
                                    <th class="modal-ttl">建物名</th>
                                    <td class="modal-data">{{ $contact['building'] }}</td>
                                </tr>
                                <tr class="modal-inner">
                                    <th class="modal-ttl">お問い合わせの種類</th>
                                    <td class="modal-data">{{ $contact['category']['content'] }}</td>
                                </tr>
                                <tr class="modal-inner">
                                    <th class="modal-ttl--last">お問い合わせ内容</th>
                                    <td class="modal-data--last">
                                        {{ $contact['detail']}}
                                    </td>
                                </tr>
                            </table>
                            <form class="delete-form" action="/delete" method="post">
                                @method('delete')
                                @csrf
                                <input type="hidden" name="id" value="{{ $contact['id'] }}" />
                                <button class="delete-btn">削除</button>
                            </form>
                        </div>
                    </div>
                    @endif
                </td>
            </tr>
            @endforeach
        </table>
    </div>
</div>

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Http\Request;
use App\Models\Contact;
use Livewire\WithPagination;

class Modal extends Component
{
    use WithPagination;


    public $showModal = false;

    protected $paginationTheme = 'bootstrap';

    public $contact;


    public function render()
    {
        return view('livewire.modal',['contacts'=>Contact::with('category')->paginate(7)]);
    }


    public function openModal()
    {
        $this->showModal = true;
    }

    public function closeModal()
    {
        $this->showModal = false;
    }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

laravel モーダルウインドウ　データベース取得などで検索して色々試したが結果は解決してません。
以下のコートに変更、
（html / modal.blade.php)
<button wire:click="openModal({{ $contact->id }})" type="button" class="detail">詳細</button>

(livewire.component / Modal.php)
public function openModal($id)
{
$this->showModal = true;

    $this->contact = Contact::with('category')->find($id);
}

だが、結果は以下画像のとおり違うデータが反映されます。
他にforeachの繰り返し処理をモーダル部分につけてしたけど、データは同じデータは出るけどそれ以外のテーブルのデータも繰り返して出てきてだめでした。

補足

livewireでのデータの取り出し方がうまくいかないのでいい方法があれば返信をいただきたいです。
お願いします。

Answer 1

ループ内で複数のmodalを設置してるのに表示の制御は$showModal一つだけなので全部のmodalが同時に変わっている。

まず、このmodalを@foreach($contacts as $contact)の外に置く。htmlの一番最後に移動でいい。

@if($showModal)
@endif

modal一つと制御する変数一つ$showModalだけにする。
後は質問の後半のやり方でいい。

wire:click="openModal({{ $contact->id }})"

idを渡してmodal用のデータを更新してから表示。「modalを表示してからデータを更新」では見た目が悪い。こういう細かいところまで気をつけることが大事。

public function openModal($id)
{
    $this->contact = Contact::with('category')->find($id);
    $this->showModal = true;
}

Comments

[asuka.t]

回答ありがとうございます。試してみましたが解決できませんでした。
public function openModal($id)
{
$this->contact = Contact::with('category')->find($id);

$this->showModal = true;
}

<button wire:click="openModal({{ $contact->id }})" type="button" class="detail">詳細</button>

この場合どの辺りに原因がありそうでしょうか？

モーダルの繰り返し表示は無くなりました。

[asuka.t]

モーダル内のviewに渡す変数を１つずつ別のにしてコンポーネントを使いそれぞれ取り出す形にしたらできるようになりました。

Answer 2

詳細ボタンにユーザーに紐づくidを渡して、モーダルを表示するときにapi経由でデータを再取得するとよいのでは？

Comments

[asuka.t]

api経由とはフォームリクエスト送信も入りますか？