Php 拉雷维尔8号及；livewire-表格行中的独立项

我正在用livewire开发一个laravel 8应用程序，在我的页面上有一个用户表，该表的行是可点击的，每行还包含用于特定操作的按钮。 我之所以使用这种逻辑，是因为如果单击表中的某一行，我会显示一个模式，其中包含与单击的行关联的数据，但当我单击某一行上的按钮时，我会显示一个edid/删除/模拟特定用户的快捷方式。 如果我单击该行，我会正确打开模式，但是当我单击快捷方式按钮时，我只希望单击快捷方式，同时与该行关联，模式也会打开。 有可能区分这种行为吗？你有什么建议吗

• dashboard.blade.php

{{--扩展布局--}
@扩展（'layout.layout2'）
{{--内容--}
@节（“内容”）
第二次会议
Puoi aggiungere utenti、eliminarli、Modificiarli e impersonarli
@如果（$errors->any（））

@foreach（$errors->all（）作为$error）
{{ucfirst（$error）}
@endforeach

@恩迪夫
合作者
用户名
诺姆
同源的
电子邮件
鳕鱼鱼鳞
卢洛
阿齐奥尼
@端部

• 带表体的livewire组件

@foreach（用户为$u）
{{$u->username}
{{$u->nome}
{{$u->cognome}
{{$u->email}
{{$u->codicefiscale}
{{$u->ruolo==0？'Admin'：'Collaboratore'}
@csrf
@csrf
@方法（'delete'）
@endforeach
德塔格利·德尔滕特酒店
&时代；
window.addEventListener（'open'，event=>{
$（“.modal body”）.empty（）；
$（“.modal body”）.append（'Username'）；
$（“.modal body”）.append（'Nome'）；
$（“.modal body”）.append（'Cognome'）；
$（“.modal body”）.append（'Email'）；
$（“.modal body”）.append（'Codice Fiscale'）；
$（“.modal body”）.append（'abilitto'）；
$（“.modal body”）.append（'Qualifica'）；
$（“.modal body”）.append（'Ruolo'）；
$（“.modal body”）.append（'Ufficio'）；
$（“.modal body”）.append（'Indirizzo'）；
$（“.modal body”）.append（'Comune'）；
$（“.modal body”）.append（'Provincia'）；
$（“.modal body”）.append（'CAP'）；
$（“.modal body”）.append（'Cellulare'）；
$（“.modal body”）.append（'Telefono'）；
$（“.modal body”）.append（'Fax'）；
//$（“.modal body”）.append（'Scrittura'）；
$（“#Utenelongmodal”）.modal（‘show’）；
})

据我们所知，点击传递的核心功能是无法避免的。尽管如此，仍有一些可能的解决方案：

• 您可以将模式open仅添加到表中的一个或多个字段中。例如用户名。这样你就避免了这些问题。大多数人在单击时都会自然而然地选择“名字”或“姓名”字段

• 假设您设置了一个打开模式的标志，您可以尝试为最近使用的操作按钮设置一个内部标志。在检查是否应打开模式时，可以对此进行测试并跳过打开

---

放置接线：点击每个元素，这样您就可以排除包含按钮的接线。谢谢，我只在前6项中添加了打开模式，效果很好：-）太棒了，太棒了，对您有用了！

{{-- Extends layout --}}
@extends('layout.layout2')

{{-- Content --}}
@section('content')
    <div class="container-fluid">
        <div class="row page-titles mx-0">
            <div class="col-sm-6 p-md-0">
                <div class="welcome-text">
                    <h4>Lista degli utenti del comune di {{$idt}}</h4>
                    <p class="mb-0">Puoi aggiungere utenti, eliminarli, modificarli e impersonarli</p>
                </div>
            </div>
        </div>
        @if ($errors->any())
            <div class="card-body">
                <div class="alert alert-danger alert-dismissible fade show solid alert-rounded">
                    <button type="button" class="close h-100" data-dismiss="alert" aria-label="Close"><span><i
                                class="mdi mdi-close"></i></span>
                    </button>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ ucfirst($error) }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Collaboratori</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-responsive-sm" style="min-width: 845px">
                            <thead>
                                <tr>
                                    <th>Username</th>
                                    <th>Nome</th>
                                    <th>Cognome</th>
                                    <th>Email</th>
                                    <th>Codice Fiscale</th>
                                    <th>Ruolo</th>
                                    <th>Azioni</th>
                                </tr>
                            </thead>
                            <livewire:table-collaboratori :idt="$idt" />
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <a class="btn btn-primary" href="{{ url('tenants/' . $idt . '/users/create') }}">
                <i class="bi bi-plus-circle"></i> Aggiungi Utente</a>
            <a class="btn btn-secondary" href="{{ url('tenants/' . $idt) }}">Torna alla dashboard</a>
        </div>
    </div>
@endsection

<tbody>
        @foreach ($users as $u)
    <tr wire:click='openModal({{ $u->id }})'>
        <td>{{ $u->username }}</td>
        <td>{{ $u->nome }}</td>
        <td>{{ $u->cognome }}</td>
        <td>{{ $u->email }}</td>
        <td>{{ $u->codicefiscale }}</td>
        <td>{{ $u->ruolo == 0 ? 'Admin' : 'Collaboratore' }}</td>
        <td>
            <div class="d-flex">
                <a href="{{ url('tenants/' . $idt . '/users/'.$u->id.'/update') }}" class="btn btn-primary shadow btn-xs sharp mr-1" >
                    <i class="fa fa-pencil"></i></a>
                <form method="POST"
                    action="{{ url('tenants/' . $idt . '/users/impersonate') }}">
                    @csrf
                    <input type="hidden" value="{{ $u->id }}" name="idu">
                    <button type="submit" class="btn btn-success shadow btn-xs sharp">
                        <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    </button>
                </form>
                <form method="POST" action="{{ url('tenants/' . $idt . '/users/delete') }}">
                    @csrf
                    @method('delete')
                    <input type="hidden" value="{{ $u->id }}" name="idu">
                    <button type="submit" class="btn btn-danger shadow btn-xs sharp">
                        <i class="fa fa-trash"></i>
                    </button>
                </form>

            </div>
        <td>
    </tr>
    @endforeach
</tbody>
<div class="modal fade" id="UtenteLongModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Dettagli dell'utente</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- da aggiungere l'azione -->
                <div class="basic-form">
                    <!-- modal popolato dallo script -->
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    window.addEventListener('open', event => {
            $(".modal-body").empty();
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Username</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.username+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Nome</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.nome+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Cognome</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cognome+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Email</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.email+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Codice Fiscale</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.codicefiscale+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Abilitato</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.abilitato+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Qualifica</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_qualifica+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Ruolo</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.ruolo+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Ufficio</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.ufficio+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Indirizzo</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.indirizzo+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Comune</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_comune+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Provincia</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.id_provincia+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">CAP</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cap+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Cellulare</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.cellulare+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Telefono</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.telefono+'" /></div></div>' );
            $(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Fax</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.fax+'" /></div></div>' );
            //$(".modal-body").append('<div class="form-group row"><label class="col-sm-3 col-form-label">Scrittura</label><div class="col-sm-9"><input type="text" class="form-control input-rounded" readonly name="username" placeholder="'+event.detail.user.scrittura+'" /></div></div>' );
            $("#UtenteLongModal").modal('show');
        })

</script>