【发布时间】：2021-06-26 09:06:59
【问题描述】：
我有一张供用户使用的表格，每一行都有一个按钮。我想在点击时在p 标记内显示该用户 ID，但它没有显示
组件：
<?php
namespace App\Http\Livewire\Backend;
use App\Domains\Auth\Models\User;
use Livewire\Component;
class Users extends Component
{
public $selectedItem;
public function selectItem($itemId)
{
$this->selectedItem = $itemId;
}
public function render()
{
$users = User::where('active' , '1')->get();
return view('livewire.backend.users')->with('Users' , $users);
}
}
并查看：
<table class="datatable-init nk-tb-list nk-tb-ulist" data-auto-responsive="false">
<thead>
<tr class="nk-tb-item nk-tb-head">
<th class="nk-tb-col">
<span class="sub-text">Name </span>
</th>
<th class="nk-tb-col tb-col-mb">
<span class="sub-text">Balance</span>
</th>
<th class="nk-tb-col tb-col-md">
<span class="sub-text">Phone</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">KYC</span>
</th>
<th class="nk-tb-col tb-col-lg">
<span class="sub-text">Last login</span>
</th>
<th class="nk-tb-col tb-col-md">
<span class="sub-text">Status</span>
</th>
<th class="nk-tb-col nk-tb-col-tools text-right"></th>
</tr>
</thead>
<tbody>
@foreach ($Users as $user)
<tr class="nk-tb-item">
<td class="nk-tb-col">
<div class="user-card">
<div class="user-info">
<span class="tb-lead">{{$user->name}}
<span class="dot dot-success d-md-none ml-1"></span>
</span>
<span>{{$user->email}}</span>
</div>
</div>
</td>
<td class="nk-tb-col tb-col-mb">
<span class="tb-amount">{{ number_format($user->balance)}}
<span class="currency">IRR</span>
</span>
</td>
<td class="nk-tb-col tb-col-md">
<span>{{$user->mobile}}</span>
</td>
<td class="nk-tb-col tb-col-lg" data-order="Email Verified - Kyc Unverified">
<ul class="list-status">
<li>
@if ($user->isVerified())
<em class="icon text-success ni ni-check-circle"></em>
<span>mail</span>
@else
<em class="icon ni ni-alert-circle"></em>
<span>mail</span>
@endif
</li>
<li>
@if ($user->fullActive())
<em class="icon text-success ni ni-check-circle"></em>
<span>KYC </span>
@else
<em class="icon ni ni-alert-circle"></em>
<span>KYC</span>
@endif
</li>
</ul>
</td>
<td class="nk-tb-col tb-col-lg">
<span>{{jdate($user->last_login_at)}}</span>
</td>
<td class="nk-tb-col tb-col-md">
@if ($user->isActive())
<span class="tb-status text-success">Active</span>
@else
<span class="tb-status text-danger">Deactive</span>
@endif
</td>
<td class="nk-tb-col nk-tb-col-tools">
<ul class="nk-tb-actions gx-1">
<li class="nk-tb-action-hidden">
<form method="POST" action="http://127.0.0.1:8000/admin/auth/user/2/mark/0" name="confirm-item" class="d-inline">
@csrf
<button typr="button" class="btn btn-trigger btn-icon" data-toggle="tooltip" data-placement="top" title="Deactive">
<em class="icon ni ni-wallet-fill"></em>
</button>
</form>
</li>
<li class="nk-tb-action-hidden">
<button wire:click="selectItem({{$user->id}})" type="button" class="btn btn-trigger btn-icon" data-toggle="tooltip" data-placement="top" title="Send Email">
<em class="icon ni ni-mail-fill"></em>
</button>
</li>
<li class="nk-tb-action-hidden">
<a href="#" class="btn btn-trigger btn-icon" data-toggle="tooltip" data-placement="top" title="Suspend">
<em class="icon ni ni-user-cross-fill"></em>
</a>
</li>
<li>
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown">
<em class="icon ni ni-more-h"></em>
</a>
<div class="dropdown-menu dropdown-menu-right">
<ul class="link-list-opt no-bdr">
<li>
<a href="#">
<em class="icon ni ni-focus"></em>
<span>Quick View</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-eye"></em>
<span>View Details</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-repeat"></em>
<span>Transaction</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-activity-round"></em>
<span>Activities</span>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<em class="icon ni ni-shield-star"></em>
<span>Reset Pass</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-shield-off"></em>
<span>Reset 2FA</span>
</a>
</li>
<li>
<a href="#">
<em class="icon ni ni-na"></em>
<span>Suspend User</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</td>
</tr>
@endforeach
</tbody>
</table>
<p>selected item : {{$selectedItem}}</p>
<!-- Modal Trigger Code -->
什么问题？
【问题讨论】：
-
您的标记显示正确。您是否检查过控制台或浏览器开发工具中的网络选项卡中的错误？
-
@Unflux 是的，但它没有显示任何错误
-
错误可能在浏览器网络选项卡中，因为它发送了一个 ajax 调用，但无论如何在这个给定的代码中没有错误......你只需在点击时设置一个变量......实际上没有任何反应用你的代码
-
这是您的全部观点吗？您的 Livewire 刀片中应该只有一个根元素（这里有一个 table-tag 和一个 p-tag）。
wire:key应该在<tr>元素上作为循环内的根元素。 -
您的代码有效，但前提是正如@Qirel 指出的那样，您将代码包装在单个根元素中（即
<div> ... your code here ... </div>。
标签： javascript php laravel laravel-livewire